一個echarts柱狀圖hover改變顏色的例子

時間 2019-12-14

原文原文鏈接

<!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="width: 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。