Vue中使用echarts 发表于 2019-04-17 | 分类于 Vue | 本文阅读量 次 本文介绍Vue中如何使用echarts 1安装代码如下: 12npm install echarts --save 2按需引入123456789101112import echarts from 'echarts/lib/echarts'// 引入饼状图import 'echarts/lib/chart/pie'// 引入折线图import 'echarts/lib/chart/line'// 引入柱状图import 'echarts/lib/chart/bar'// 引入提示框和标题组件import 'echarts/lib/component/tooltip'import 'echarts/lib/component/title'import 'echarts/lib/component/legend' 3使用123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475drawLine(x,y1,y2){ const myChart=echarts.init(document.getElementById('line')) myChart.setOption({ backgroundColor: "#fff", grid: { left: '20px', right: '20px', bottom: '20px', containLabel: true }, tooltip: { trigger: 'axis' }, legend: { data: ['收入', '支出'], right: '20px', top: '20px' }, xAxis: { type: 'category', data: x, axisTick: { show: false }, axisLine:{ lineStyle:{ color: "#cccccc" } } }, yAxis: { type: 'value', axisLine: { show: false, lineStyle:{ color: "#cccccc" } }, axisTick: { show: false }, }, series: [{ data: y1, name: '收入', type: 'line', smooth:true, symbol: 'circle', symbolSize: 5, itemStyle: { color: '#67C23A', lineStyle: { color: '#67C23A', } }, },{ data: y2, name: '支出', type: 'line', smooth:true, symbol: 'circle', symbolSize: 5, itemStyle: { color: '#E6A23C', lineStyle: { color: '#E6A23C', } }, }] }); myChart.on('click', function (params) { //图表绑定点击事件 alert(params.name) });} 注意:渲染图标的外部容器必须指定宽高 扫一扫,请老师喝水 打赏 微信支付 支付宝