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':自定义系列