zoukankan      html  css  js  c++  java
  • 一个echarts柱状图hover改变颜色的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style=" 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                    axisLabel:{
                        color: 'blue'
                    },
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    itemStyle:{
                        color: 'blue'
                    },
                }],
            };
            
            myChart.on('mouseover',function(event){
                console.log(event);
                option.xAxis.axisLabel.color=function(value,index){
                    return index === event.dataIndex?'red':'blue';
                };
                option.series[0].itemStyle.color=function(params){
                    return params.name === event.name?'red':'blue';
                }
                myChart.setOption(option);
            })
            myChart.on('mouseout',function(event){
                console.log(event);
                option.xAxis.axisLabel.color='blue';
                option.series[0].itemStyle.color='blue';
                myChart.setOption(option);
            })
    
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </html>
  • 相关阅读:
    响应式设计的 5 个 CSS 实用技巧
    iframe的高度自适应的方法
    HDOJ1285 比赛排名(拓扑排序)
    GENIA项目GENIA语料库
    HDOJ1102 修路问题(最小生成树Prim)
    二叉树的一些操作
    GENIA项目综述论文(E99)
    GENIA项目主页
    读《统计自然语言处理》有笔记——语料库与知识词汇库
    HDOJ2535 ( Vote ) 【水题】
  • 原文地址:https://www.cnblogs.com/xianxiaobo/p/9679113.html
Copyright © 2011-2022 走看看