1、npm安装echarts
npm install echarts
2、main.js 中引入配置
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
3、在组件.vue中使用
1>存储图像容器创建
外面是Vue内容,可换其它包裹(也可不包裹),主要是中间那一行
<template>
<el-form ref="form" label-width="80px">
<div id="main" style="width: 600px;height:400px;"></div>
</el-form>
</template>
2>js中对容器进行赋值渲染
option中内容可去官网参考更换
let myChart = this.$echarts.init(document.getElementById('main'));
/*
监听图表容器的大小并改变图表大小
window.addEventListener('resize', function() {
myChart.resize();
});
*/
// 指定图表的配置项和数据
let option = {
title: {
text: "项目供水量",
},
tooltip: {},
legend: {},
xAxis: {
data: xData
},
yAxis: {
type: "value",
name: "单位(m³)",
},
series: [
{
data: yData,
type: 'bar',
stack: 'x'
}
]
};
myChart.setOption(option);
完成