Echarts折线图案例

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

问题：重置echarts折线图时，总会出现多个数据的拐点，与实际渲染的数据拐点不符合。

解决： 在实例化echarts后 clear 上一次的图。

myEcharts.clear()

Jetbrains全家桶1年46，售后保障稳定

案例

import * as echarts from 'echarts';
// ...

const myEcharts = echarts.init(document.querySelector('#test'));
const myTestEcharts = echarts.init(document.querySelector('#test2'));
myEcharts.group = 'group1';
myTestEcharts.group = 'group1';
// 以上两组会进行关联
const option = { 
   
      // 触摸 echarts图 的提示内容
      tooltip: { 
   
        // 是否显示提示框
        show: true,
        // 触发类型：
        // 'item':主要在散点图，饼图等无类目轴的图表中使用
        // 'axis': 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
        // 'none': 什么都不触发
        trigger: 'axis',
        // 自定义提示框文案
        formatter(params) { 
   
          // console.log(params, 'params');
          return 'test';
        }
      },
      // X轴
      xAxis: { 
   
        // 类型
        type: 'time',
        // 刻度对齐
        boundaryGap: true
      },
      // Y轴
      yAxis: { 
   
        type: 'category',
        boundaryGap: true,
        // 对应展示数据
        data: yAxisData,
        // 展示文案
        axisLabel: { 
   
          // 自定义文案
          formatter: function (params) { 
   
            const arr = params.split(':');
            arr.pop();
            return arr.join(':');
          }
        }
      },
      grid: { 
   
        // 显示数据的图表位于当前canvas的坐标轴
        x: 150,
        y: 55,
        borderWidth: 1
      },
      // 坐标轴伸缩
      dataZoom: [
        // type: 'slider'; 鼠标滚轮缩放/触摸板双指
        { 
   
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0,
          end: 100
        },
        { 
   
          type: 'slider',
          show: true,
          yAxisIndex: [0],
          left: '93%',
          start: 0,
          end: 100
        },
        // type: 'inside'; 范围点击缩放
        { 
   
          type: 'inside',
          xAxisIndex: [0],
          start: 0,
          end: 100
        },
        { 
   
          type: 'inside',
          yAxisIndex: [0],
          start: 0,
          end: 100
        }
      ],
      series: [
		{ 
   
		  name: 'group1', // 每条折线命名后可以通过connect关联
	      type: 'line',
	      symbol: 'none', // 折线图拐点形状
	      // symbolSize: 6, // 形状大小
	      smooth: true, // 线条平滑
	      markPoint: { 
    // 自定义拐点
	        symbolSize: 20, // 下面data中统一大小
	        data: [
	          { 
   
	            coord: [item.startTime, action], // [X轴, Y轴]
	            symbol: 'circle', // 形状
	            symbolSize: 8 // 大小
	            // ...旋转、位置
	          }
	        ]
	      }
	    },
	    markArea: { 
    // 折线粉红色背景区间
          itemStyle: { 
   
            color: 'rgba(255, 173, 177, 0.4)'
          },
          data: [
            [
              { 
   
                name: 'test', // 区间title
                xAxis: '2022-03-23 11:17:17'
              },
              { 
   
                xAxis: '2022-03-26 14:17:17'
              }
            ]
          ]
        }
	  ]
    };