第一步:引入echart依赖
cnpm i echarts --save
第二步:使用ecahrt
src/main.js import echarts from 'echarts' Vue.prototype.$echarts=echarts
解释:
在main.js中引入echarts, 然后赋值到Vue的原型上面,在页面就可以使用this.$echarts获取到了
第三步:实例效果和代码
<template> <div class="content-box"> <!-- vue的ref可以通过this.$refs.获取到DOM节点 --> <!-- echart容器div必须设置高度,否则不显示 --> <div ref="echart" style="height:300px;"></div> </div> </template> <script> export default { mounted() { this.$nextTick(() => { this.initEchart(); }); }, methods:{ initEchart(){ //获取DOM节点并初始化 let chart = this.$echarts.init(this.$refs.echart); //编写echart参数 let option = { xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'邮件营销', type:'line', stack: '总量', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[220, 182, 191, 234, 290, 330, 310] }, ] }; //设置图表的参数 chart.setOption(option); } } } </script>