echarts使用

1. title:标题

  title: {
           text: '吸嘴',//chartTitle
           textStyle: {
               fontSize: 8,
               color: '#000'
           },
           left: 20,
           top: 8
         },

2.grid:图整体在dom中的位置

//可以设置多个图
grid: [{
    bottom: 20,//可以是百分比
    top:10,
    left:10,
    right:10                             
}],

3.color，legend:图例设置

//color和data需要一一对应
color: ['#5470c6', 'red'],
legend: {
    data: ['点数', '抛料数'],
    itemWidth: 12,
    itemHeight: 9,
    textStyle: {
        fontSize: 8
    },
    top: 6
},

4.x轴：一般为时间，需要设置data，可以设置多个，type一般为：category

                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: true,
                                data: categories,
                                axisLabel: {
                                    fontSize: 8
                                }
                            },
                        ],

5.y轴：y轴的刻度，一般不设置data，可以设置多个y轴，但要和x轴一一对应

                       yAxis: [
                            {
                                type: 'value',
                                scale: true,
                                name: '标题',//y轴的标题
                                nameTextStyle: {//对y轴上name 的设置
                                    fontWeight: 'bolder',
                                    fontFamily: 'SimHei',
                                    color: '#000'
                                },
                                // max: 25,//max可以不设置，则会自动设置
                                min: 0,
                                boundaryGap: [0.2, 0.2],
                                axisLabel: {
                                    fontSize: 8,
                                    formatter: '{value} ℃'//渲染y轴文字
                                    show: false//是否显示y轴上的文字
                                },

                            },
                        ],

6.series：最重要的图和需要渲染的数据，type，决定我们要以何种方式渲染（bar:柱状、line:线、pie:饼图）

                        series: [
                            {
                                name: '实际值',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' ℃';
                                    }
                                },
                                // data: [
                                //     2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                                // ]
                                data: sjList
                            },
                            {
                                name: '设定值',
                                type: 'bar',
                                tooltip: {
                                    valueFormatter: function (value) {
                                        return value + ' ℃';
                                    }
                                },
                                // data: [
                                //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                                // ]
                                data: sdList
                            },

                        ]

7.文字设置，全局的字体样式

       textStyle: {
                     fontSize: 8,
                     fontFamily:""
             },

8.更新echarts数据：

获取已经创建好的echarts实例对象，然后通过setOption（）方法更新数据

    refreshData() {
      //刷新数据
      var chart = echarts.getInstanceByDom(this.$refs.recentvisit);
      var option = chart.getOption();
      option.xAxis.data = this.xdatas;
      option.series[0].data = this.ydatas;
      chart.setOption(option, true);
    },

9.动态echarts:

通过定时器setInterval实现，将data数组删除第一个数据，再将新数据添加至末尾，然后通过setOption（）方法进行数据更新

   setInterval(function () {
                        //2023-05-31 16:20:00.0将时间组装成该格式的时间字符串
                        let wztime = app.startDay + ' ' + categories[categories.length - 1] + '.0'
                        //利用new Date 将时间标准化，然后调用getTime方法将时间转换成时间戳
                        let date = new Date(wztime).getTime()
                        //有了时间戳格式的时间，就可以做运算了，以毫秒为单位（1秒=1000毫秒）
                        //运算得到的新的时间戳格式的时间再通过new Date转化为标准时间
                        let axisData = new Date(date + 2000).toLocaleTimeString('chinese', { hour12: false });

                        data.shift();
                        data.push(Math.floor(Math.random() * (4 - 1 + 1) + app.total / 300));
                        data2.shift();
                        data2.push(Math.floor(app.totalError / 300));
                        categories.shift();
                        categories.push(axisData);
                        categories2.shift();
                        categories2.push(Math.floor(Math.random() * (4 - 1 + 1) + app.total / 300));
                        myChart.setOption({
                            xAxis: [
                                {
                                    data: categories
                                },
                                {
                                    data: categories2
                                }
                            ],

                            series: [
                                {
                                    data: data
                                },
                                {
                                    data: data2
                                }
                            ]
                        });
                    }, 2100);