禁用echart hover

2024-02-06 14:20:58
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>首页</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  <!-- 引入 echarts.js -->
  <script src="./echarts.js"></script>
<!--  <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>-->
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .contain {
      display: inline-block;
      width: 375px;
      height: 500px;
      /* background: pink; */
    }

    /* echart自身 */
    .main {
      width: 100%;
      padding: 15px;
      height: 300px;
      width: 300px;
      background: yellow;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
<div class="contain">
  <div id="main" class="main"></div>
</div>

</body>


<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var xData = ['3-10', '', '', '', '', '', '3-16']
  var legendData = ['接待量', '新增客户', '跟进客户', '下订客户', '成交客户', '流失客户']
  var yData = [
    {
      name: '接待量',
      type: 'line',
      data: [10, 20, 10, 20, 10, 20, 10],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#FFFF00',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    },
    {
      name: '新增客户',
      type: 'line',
      data: [20, 30, 20, 30, 20, 30, 20],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#4DD4CC',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    },
    {
      name: '跟进客户',
      type: 'line',
      data: [30, 40, 30, 40, 30, 40, 30],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#2352FF',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    },
    {
      name: '下订客户',
      type: 'line',
      data: [40, 50, 40, 50, 40, 50, 40],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#00CC00',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    },
    {
      name: '成交客户',
      type: 'line',
      data: [50, 60, 50, 60, 50, 60, 50],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#D202FF',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    },
    {
      name: '流失客户',
      type: 'line',
      data: [60, 70, 60, 70, 60, 70, 60],
      // 平滑曲线显示
      smooth: 0.5,
      // 拐点标志的样式设置
      itemStyle: {
        // 拐点大小
        size: 6,
        // 拐点颜色
        color: '#FD5853',
        // 拐点边框色
        borderColor: "#fff"
      },
      // 标记的图形,圆心
      symbol: "circle",
      lineStyle: {
        // 线条颜色
        color: '#fff',
        // 线宽
        width: 1
      }
    }
  ]




  var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: 'green'
      },
      // silent: true,
      emphasis: {
        itemStyle: {
          color: 'pink'
        }
      },
      backgroundStyle: {
        color: 'grey'
      }
    }]
  };





  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  myChart.on('click', function (parmas) {
    console.log(parmas)

  });

  setTimeout(() => {
    // myChart.resize({
    //   width: '500px',
    //   height: '500px'
    // })

    myChart.dispatchAction({
      type: 'highlight',
      // type: 'focusNodeAdjacency',
      seriesIndex: 0,
      dataIndex: 4
    });

    console.log('修改')



  }, 3000)

</script>

</html>
码农公寓

相关文章
