使用如下命令通过 npm 安装 ECharts
npm install echarts --save
组件页面中导入html内容
<template>
<div>
<div id="main" ref="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "BarChart",
mounted() {
/* var myChart = echarts.init(document.getElementById("main")); */
var myChart = echarts.init(this.$refs.main);
myChart.setOption({
title: {
text: "柱状图",
},
tooltip: {},
xAxis: {
axisLabel: {
interval: 0, /* 显示所有的x轴的数据 */
rotate: 90, /* 放不下的倾斜角度 */
margin: 15 /* 数据距离刻度线的距离 */ },
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
/* color: 'red',柱子全变红色 */
data: [
{
name: "衬衫",
value: 5,
itemStyle: { 给某一个柱子单独设置颜色
color: {
type: "linear", 渐变色
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "pink" },
{ offset: 1, color: "orange" },
],
global: false,
},
},
},
{ name: "羊毛衫", value: 20 },
{ name: "雪纺衫", value: 36 },
{ name: "裤子", value: 10 },
{ name: "高跟鞋", value: 10 },
{ name: "袜子", value: 20 },
],
},
],
});
window.BarChart = myChart;
},
};
</script>
在主页面导入组件，并且让视图随页面尺寸变化
mounted(){
/* 页面尺寸一发生变化，就重新resize渲染视图 */
window.onresize=function(){
window.BarChart.resize();
window.LineChart.resize();
window.PieChart.resize();
}
}
