--- VUE data table, column, line switch (echarts introducing and use)

       In the front-end development, the data show that a page must be developed to show the form of data can be displayed in a diversity of forms and different graphics. Well, today to learn about how echarts vue introduced into the project, the realization of image display data.

To showcase the development of the page

                                                                   It can be switched to a table, column, line display

Production steps

1. Install eachats

npm install echarts --save

2. introduced globally or locally incorporated echarts

Global introduction: main.js introduced in [file]. Disadvantages: the introduction of a global package will all echarts charts, resulting in too large.

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

Local introduced: the introduction of the page you want to use,

import echarts from "echarts";

3. Drawing preparation and drawing

3.1 dom written data display area as follows:

  

Note: The column and line chart area be sure to add style width height, otherwise it will show graphics.

3.2 Based prepared dom, initialization echarts example, [var myChart = echarts.init (document.getElementById ( "histogram"));]

[Configuration and myChart.setOption (option);] to set data

Column and line in FIG differences: The following code [] in series, respectively [type: "bar"], [type: "line"]

  //绘制柱形图
    drawHistogram() {
      var myChart = echarts.init(document.getElementById("histogram"));
      // 准备配置
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "必应",
            "其他"
          ]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "广告",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            markLine: {
              lineStyle: {
                normal: {
                  type: "dashed"
                }
              },
              data: [[{ type: "min" }, { type: "max" }]]
            }
          },
          {
            name: "百度",
            type: "bar",
            barWidth: 5,
            stack: "搜索引擎",
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: "谷歌",
            type: "bar",
            stack: "搜索引擎",
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: "必应",
            type: "bar",
            stack: "搜索引擎",
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: "其他",
            type: "bar",
            stack: "搜索引擎",
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      };
      // 使用这个配置
      myChart.setOption(option);
    },

Note: The above method for rendering graphics to be written in Mounted [()] The hook function, i.e., when the page appears displaying graphics. The actual development, starting with the background graphics data acquisition, and then call the drawing methods.

The drawing method can be packaged, the incoming series [] and [id]