1.npm安装echarts:
npm install echarts -s
2.全局引入（我们安装完成之后，可以在main.js中全局引入echarts）
import echarts from "echarts"; Vue.prototye.$echarts = echarts;
3.html代码：
<template>
<div id="chartColumn" style="width: 100%; height: 400px;">
</div>
</template>
4.js代码：
<script>
import echarts from 'echarts'
export default {
data(){
return {
chartColumn: null
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine(){
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartColumn.setOption({
title: { text: 'Column Chart' },
tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#76baf1" } } },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
});
}
}
}
</script>
5.类型type：
type: 'bar'：柱状/条形图 type: 'line'：折线/面积图 type: 'pie'：饼图 type: 'scatter'：散点（气泡）图 type: 'effectScatter'：带有涟漪特效动画的散点（气泡） type: 'radar'：雷达图 type: 'tree'：树型图 type: 'treemap'：树型图 type: 'sunburst'：旭日图 type: 'boxplot'：箱形图 type: 'candlestick'：K线图 type: 'heatmap'：热力图 type: 'map'：地图 type: 'parallel'：平行坐标系的系列 type: 'lines'：线图 type: 'graph'：关系图 type: 'sankey'：桑基图 type: 'funnel'：漏斗图 type: 'gauge'：仪表盘 type: 'pictorialBar'：象形柱图 type: 'themeRiver'：主题河流 type: 'custom'：自定义系列