第一步:引入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>


Logo

前往低代码交流专区

更多推荐