Vue使用ECharts数据可视化图表：单个图表、循环显示图表（

1、下载 cnpm install echarts -S

2、main.js引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、单个图表页面案例

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

<template>
   <div>
     <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
   </div>
 </template>
 <script>
 export default {
   mounted() {
     this.drawLine();
   },
   methods: {
     drawLine() {
       // 单个图表
       let myChart = this.$echarts.init(document.getElementById("myChart"));
       myChart.setOption({
         title: { text: "在Vue中使用echarts" },
         tooltip: {},
         xAxis: {
           data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
         },
         yAxis: {},
         series: [
           {
             name: "销量",
             type: "bar",
             data: [5, 20, 36, 10, 10, 20]
          }
         ]
       });
     }
   }
 };
 </script>

这样一个简单的图表就完成了

image.png

4、循环显示图表

 <template>
   <div>
     <div v-for="(item,index) in echartsList" :key="index">
       <div :id="`radar${index}`" :style="{width: '600px', height: '600px'}" />
     </div>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
            echartsList: [
    { // 饼图格式
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            // color图表颜色
            { value: 335, name: '直接访问', itemStyle: { color: '#3C90F7' }},
            { value: 310, name: '邮件营销', itemStyle: { color: '#55BFC0' }},
            { value: 234, name: '联盟广告', itemStyle: { color: '#5EBE67' }},
            { value: 135, name: '视频广告', itemStyle: { color: '#F4CD49' }},
            { value: 1548, name: '搜索引擎', itemStyle: { color: '#E05667' }}
          ]
        }
      ]
    },
    {// 堆叠柱状图格式
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['邮件营销', '联盟广告', '视频广告']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '邮件营销',
          type: 'bar',
          stack: '广告',
          data: [120, 132, 101],
          color: '#3C90F7' // 图表颜色
        },
        {
          name: '联盟广告',
          type: 'bar',
          stack: '广告',
          data: [220, 182, 191],
          color: '#55BFC0'
        },
        {
          name: '视频广告',
          type: 'bar',
          stack: '广告',
          data: [150, 232, 201],
          color: '#F4CD49'
        }
      ]
    },
    { // 水平柱状图格式
      title: {
        text: '世界人口总量',
        subtext: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['2011年']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
      },
      series: [
        {
          name: '2011年',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          color: '#3C90F7'// 图表颜色
        }
      ]
    }
  ]
     };
   },
   mounted() {
     this.drawLine();
   },
   methods: {
     drawLine() {
       this.echartsList.forEach((v, index) => {
         const myChart = this.$echarts.init(
           document.getElementById(`radar${index}`)
         );
         myChart.setOption(this.echartsList[index]);
       });
     }
   }
 };
 </script>

image.png

结语：至此已可以使用ECharts图表，更多配置项使用后在补充！