第一步:
在终端下载 npm install echarts -S
第二步:
在mian.js中引入成全局
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
第三步:
<div id="set-Con-con-left-con"></div>
mounted() {
this.drawLine();
},
methods:{
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("set-Con-con-left-con")
);
// 绘制图表
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
["product", "家电", "百货", "食品"],
["6号", 234, 164, 144],
["7号", 278, 170, 198],
["8号", 270, 190, 150],
["9号", 190, 130, 235],
["10号", 230, 160, 120]
]
},
xAxis: { type: "category" },
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
};
myChart.setOption(option);
},
}
记得设宽高谢谢,
这是一个建议的echarts引入方式