echarts的基本使用

安装命令：

npm install echarts 或 yarn add echarts

项目中引入echarts：

import * as echarts from "echarts"

 getEcharts() {

      // 获取echarts作用实例作用dom

      this.myChart = echarts.init(document.getElementById("mmmm"));

      const option = {

        title: {

          // text: "单位 : 场",

          subtext: '单位 : 场',

          left: '5%',

          top: 0,

        },

        tooltip: {

          show: true,

          trigger: 'axis',

          axisPointer: {

            label: {

              backgroundColor: '#6a7985'

            }

          },

          // 鼠标悬停显示的信息提示框

          formatter: function (params) {

            const data = params[0].data

            const time = params[0].axisValue

            return `时间: ${time}<br/>

              新增人数: ${data}人`

          }

        },

        xAxis: {

          type: "category",

          data: this.timeData,

          axisTick: {

            show: false // 隐藏x轴刻度

          },

          boundaryGap: false, // false时从0刻度开始

          axisLabel: {

            formatter: function (val) {

              let strs = val; //转化为字符串数组

              var str = "";

              for (var i = 0, s; (s = strs[i++]);) {

                str += s;

                if (!(i % 5))

                  //两个字符换行

                  str += "\n";

              }

              return str.substr(6, 9);

            },

          },

        },

        yAxis: {

          type: "value",

        },

        series: [

          {

            data: this.statisticalData, //所需数据

            symbolSize: 10, // 空心圆的大小

            type: 'line',

            // 线条配置

            showSymbol: true,

            type: "line",

            smooth: true, // 折线是否为平滑曲线

            itemStyle: {

              normal: {

                color: "#60D139", //线条颜色

                lineStyle: {

                  width: 3, //设置线条粗细

                },

              },

            },

          },

        ],

      };

      option && this.myChart.setOption(option);

    }