折线图根据拐点值显示不同颜色

<template>
  <div style="margin-top: 100px;">
    <div
      style="width: 600px; height: 180px;margin: auto;"
      id="main1"
    ></div>
    <div
      style="width: 600px; height: 180px;margin: auto;"
      id="main2"
    ></div>
    <div
      style="width: 600px; height: 180px;margin: auto;"
      id="main3"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.init1()
    this.init2()
    this.init3()
    window.handleClick = this.formatter
    window.isShow = false; // 假设这是全局变量
  },
  methods: {
    formatter () {
      console.log(", ticket, callback:");
      window.isShow = !window.isShow
    },
    init1 () {
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: 'Temperature Change in the Coming Week',
          left: 'center'
        },
        // 设置canvas内部表格的内距
        grid: {
          x: 20,
          y: 40,
          x2: 20,
          y2: 10,
          borderWidth: 5
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          enterable: true,
          backgroundColor: 'white',
          formatter: function (arg, ticket, callback) {
            console.log(arg, "arg")
            var options = ['1', '2'] // 假设arg是一个对象，其中包含一个名为options的数组，用于存储自定义选项
            var selectOptions = '';
            for (var i = 0; i < options.length; i++) {
              selectOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
            }
            var res = `
            <div style="color:black;width: 200px;height: 180px;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px 5px 10px rgba(0, 0, 0, 0.2);border-radius:5px;padding:5px">
              <div style="font-weight:bold;color:black">2011/07/24 00:00:00</div>
              <div style="color:black;margin-top:3px">判别结果：1.777777</div>
              <div style="color:black;margin-top:3px">判别结果：1.777777</div>
              <div style="color:black;margin-top:3px">处理后：1.777777</div>
              <span >相差标识：</span>
              <select onchange="handleClick()" style="display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px">
                ${selectOptions}
              </select>
              <div style="margin-top:8px">
                <div  id="button"></div>
                <div style="display: inline-block;width:60px;height:25px;background-color: rgb(55, 178, 158);border-color: rgb(55, 178, 158);color:white;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  ${window.isShow ? '保存' : '编辑'}
                </div>
                <div style="margin-left:10px;display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  取消
                </div>
              <div>
            </div>
            `
            return res
          }
        },
        legend: {},
        toolbox: {
          show: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false // 设置 x 轴不显示
        },
        yAxis: {
          type: 'value',
          name: '',
          min: -10, // 设置 y 轴最小值
          max: 10   // 设置 y 轴最大值
        },
        splitArea: {
          show: true
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [0, 1, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0],
            smooth: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data > 1 ? 'red' : 'black';
                },  // 拐点边框颜色
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    init2 () {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: 'Temperature Change in the Coming Week',
          left: 'center'
        },
        // 设置canvas内部表格的内距
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 10,
          borderWidth: 5
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          enterable: true,
          backgroundColor: 'white',
          formatter: function (arg, ticket, callback) {
            var options = ['1', '2'] // 假设arg是一个对象，其中包含一个名为options的数组，用于存储自定义选项
            var selectOptions = '';
            for (var i = 0; i < options.length; i++) {
              selectOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
            }
            var res = `
            <div style="color:black;width: 200px;height: 180px;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px 5px 10px rgba(0, 0, 0, 0.2);border-radius:5px;padding:5px">
              <div style="font-weight:bold;color:black">2011/07/24 00:00:00</div>
              <div style="color:black;margin-top:3px">：1.777777</div>
              <div style="color:black;margin-top:3px">判别结果：1.777777</div>
              <div style="color:black;margin-top:3px">处理后：1.777777</div>
              <span >相差标识：</span>
              <select onchange="handleClick()" style="display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px">
                ${selectOptions}
              </select>
              <div style="margin-top:8px">
                <div  id="button"></div>
                <div style="display: inline-block;width:60px;height:25px;background-color: rgb(55, 178, 158);border-color: rgb(55, 178, 158);color:white;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  ${window.isShow ? '保存' : '编辑'}
                </div>
                <div style="margin-left:10px;display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  取消
                </div>
              <div>
            </div>
            `
            return res
          }
        },
        legend: {},
        toolbox: {
          show: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false // 设置 x 轴不显示
        },
        yAxis: {
          type: 'value',
          name: '',
          min: -10, // 设置 y 轴最小值
          max: 10   // 设置 y 轴最大值
        },
        splitArea: {
          show: true
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [-5, 2, 5, 0, -2, -5, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0],
            smooth: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data > 1 ? 'red' : 'black';
                },  // 拐点边框颜色
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    init3 () {
      var chartDom = document.getElementById('main3');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: 'Temperature Change in the Coming Week',
          left: 'center'
        },
        // 设置canvas内部表格的内距
        grid: {
          x: 20,
          y: 30,
          x2: 20,
          y2: 20,
          borderWidth: 5
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          enterable: true,
          backgroundColor: 'white',
          formatter: function (arg, ticket, callback) {
            var options = ['1', '2'] // 假设arg是一个对象，其中包含一个名为options的数组，用于存储自定义选项
            var selectOptions = '';
            for (var i = 0; i < options.length; i++) {
              selectOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
            }
            var res = `
            <div style="color:black;width: 200px;height: 180px;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2), -5px 5px 10px rgba(0, 0, 0, 0.2);border-radius:5px;padding:5px">
              <div style="font-weight:bold;color:black">2011/07/24 00:00:00</div>
              <div style="color:black;margin-top:3px">：1.777777</div>
              <div style="color:black;margin-top:3px">判别结果：1.777777</div>
              <div style="color:black;margin-top:3px">处理后：1.777777</div>
              <span >相差标识：</span>
              <select onchange="handleClick()" style="display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px">
                ${selectOptions}
              </select>
              <div style="margin-top:8px">
                <div  id="button"></div>
                <div style="display: inline-block;width:60px;height:25px;background-color: rgb(55, 178, 158);border-color: rgb(55, 178, 158);color:white;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  ${window.isShow ? '保存' : '编辑'}
                </div>
                <div style="margin-left:10px;display: inline-block;width:60px;height:25px;background-color: white;border: 1px solid #D3D3D3 ;color:black;padding:3px;border-radius:2px;text-align:center;line-height:20px" onclick="handleClick()">
                  取消
                </div>
              <div>
            </div>
            `
            return res
          }
        },
        legend: {},
        toolbox: {
          show: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          name: '',
          min: -10, // 设置 y 轴最小值
          max: 10   // 设置 y 轴最大值
        },
        splitArea: {
          show: true
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0, 2, 0, -2, 0],
            smooth: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data > 1 ? 'red' : 'black';
                },  // 拐点边框颜色
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>