禁用echart hover

2021-01-18 15:32:03 阅读：395 来源： 互联网

标签：hover echart color 禁用拐点 width itemStyle fff type

<!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>

标签：hover,echart,color,禁用,拐点,width,itemStyle,fff,type
来源： https://blog.csdn.net/u013239476/article/details/112783350

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

禁用echart hover