JS插件：ECharts-數據圖表化-事件

時間 2020-07-05

標籤插件 echarts 數據圖表事件欄目 JavaScript 简体版

原文原文鏈接

主要內容： tooltip.formatter / events.legendselectchanged

1、折線圖

echart官網javascript

1. 先引入：echarts.common.min.js /或者： echarts.jshtml

2. 爲ECharts準備一個具有大小的DIV容器java

3. js:設置參數初始化圖表jquery

1 <head>
2     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
3     <meta charset="utf-8" />
4     <script src="/Scripts/jquery-2.js"></script>
5     <script type="text/javascript" src="/Scripts/echarts.min.js"></script>
6     <title>EChart圖片測試</title>
7 </head>

<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

<script>
    window.onload = function () { loadChasrt() };
    function loadChasrt() {
        var dateList = ["2018-12-14 14:00:21", "2018-12-15 14:00:21", "2018-12-18 11:00:21", "2018-12-18 13:59:58"];
        var CrackValue =[2,1,12,11] ;
        var TiltAngle  =[12,11,22,11] ;
        var Temperature = [16, 11, 12, 15];
        var option = GetDefaultOption('長度-角度關係圖', dateList);
        option.legend.data = ["長度", "角度", "溫度"];
        option.yAxis = [
                       { boundaryGap: [0, '50%'], type: 'value', name: '長度', position: 'left', offset: 0, splitNumber: 0, splitLine: { show: true, } },
                       { boundaryGap: [0, '50%'], type: 'value', name: '角度', position: 'right', offset: 0, splitNumber: 0, splitLine: { show: true, } },
                       { boundaryGap: [0, '50%'], type: 'value', name: '溫度', position: 'right', offset: 50, splitNumber: 0, splitLine: { show: true, } },
        ]
        option.series.push({ name: '長度', type: 'line', stack: '', data: CrackValue, yAxisIndex: 0, symbol: 'none' })
        option.series.push({ name: '角度', type: 'line', stack: '', data: TiltAngle, yAxisIndex: 1, symbol: 'none' })
        option.series.push({ name: '溫度', type: 'line', stack: '', data: Temperature, yAxisIndex: 2, symbol: 'none' })
        option.tooltip = {
            trigger: 'axis' 
           
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
         
    } 
    
    //獲取圖表初始化
    function GetDefaultOption(name, dataX) {
        return {
            title: { text: name, x: 'center', y: 'top' },
            tooltip: { trigger: 'axis' },
            legend: { data: [], x: 'left', y: 'top' },
            dataZoom: { show: true, start: 0 },
            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
            toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } },
            xAxis: { type: 'category', boundaryGap: false, data: dataX },
            yAxis: { type: 'value' },
            series: []
        };
    }

</script>

View Code:JS參數配置

2、設置懸浮提示（tooltip）：鼠標懸浮時文字提示

官網文檔-配置項： http://www.echartsjs.com/option.html#legend.tooltipapi

自定義函數設置內容：echarts

1 option.tooltip = {
2     trigger: 'axis',
3     backgroundColor: 'rgba(50,50,50,0.7)',
4     formatter: formatterSettingFun
5 }

 1 function formatterSettingFun(params, ticket, callback) {
 2          var res = '<div><p>注意：' + params[0].name + '</p></div>'
 3         for (var i = 0; i < params.length; i++) {
 4             var seriesName = String(params[i].seriesName);
 5             var titleName = seriesName+"值";
 6             var unit = "mm";
 7             if (i == 2)
 8             { unit = "°c"; }
 9             res += '<p  ><span  style=" background-color:' + params[i].color + '; display:inline-block ;  width:10PX;height:10PX;border-radius:50%;  
10      filter:alpha(opacity=70); -moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;">
11      </span>' + titleName + ':' + params[i].data + unit + '</p>'
12         }
13         setTimeout(function () {
14             //// 僅爲了模擬異步回調 
15             //callback(ticket, res);
16         }, 1000)
17         return res;
18     }

官網文檔-配置項異步

字體顏色樣式設置：textStyleide

 1  option.tooltip = {
 2             trigger: 'axis',
 3             textStyle: {
 4                 color: 'yellow',
 5                 decoration: 'none',
 6                 fontFamily: 'Verdana, sans-serif',
 7                 fontSize: 15,
 8                 fontStyle: 'italic',
 9                 fontWeight: 'bold'
10             },
11             formatter: formatterSettingFun
12         };

3、設置圖例（legend）爲默認未選中狀態、重寫圖例點擊事件

圖片初始化完成以後，清空圖表從新設置：函數

   var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        //設置默認爲不選中狀態
        var opt = myChart.getOption();
        opt["legend"][0]["selected"]["角度"] = false;
        myChart.clear();
        myChart.setOption(opt);

官網API:events.legendselectchanged測試

 1     //重寫圖例點擊事件
 2         myChart.on('legendselectchanged', function (params) {
 3             alert(params.type);
 4             alert(params.name)
 5             alert(params.selected)
 6             var name = params.name;
 7             var Checked = params.selected['角度'];
 8             if (name == '角度') {
 9                
10             }
11 
12         });

完整的demo-源代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="/Scripts/jquery-2.js"></script>
    <script type="text/javascript" src="/Scripts/echarts.min.js"></script>
    <title>EChart圖片測試</title>
</head>


<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

<script>
    window.onload = function () { loadChasrt() };
    function loadChasrt() {
        var dateList = ["2018-12-14 14:00:21", "2018-12-15 14:00:21", "2018-12-18 11:00:21", "2018-12-18 13:59:58"];
        var CrackValue =[2,1,12,11] ;
        var TiltAngle  =[12,11,22,11] ;
        var Temperature = [16, 11, 12, 15];
        var option = GetDefaultOption('長度-角度關係圖', dateList);
        option.legend.data = ["長度", "角度", "溫度"];
        option.yAxis = [
                       { boundaryGap: [0, '50%'], type: 'value', name: '長度', position: 'left', offset: 0, splitNumber: 0, splitLine: { show: true, } },
                       { boundaryGap: [0, '50%'], type: 'value', name: '角度', position: 'right', offset: 0, splitNumber: 0, splitLine: { show: true, } },
                       { boundaryGap: [0, '50%'], type: 'value', name: '溫度', position: 'right', offset: 50, splitNumber: 0, splitLine: { show: true, } },
        ]
        option.series.push({ name: '長度', type: 'line', stack: '', data: CrackValue, yAxisIndex: 0, symbol: 'none' })
        option.series.push({ name: '角度', type: 'line', stack: '', data: TiltAngle, yAxisIndex: 1, symbol: 'none' })
        option.series.push({ name: '溫度', type: 'line', stack: '', data: Temperature, yAxisIndex: 2, symbol: 'none' })
        option.tooltip = {
            trigger: 'axis',
            formatter: formatterSettingFun
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        //設置默認爲不選中狀態
        var opt = myChart.getOption();
        opt["legend"][0]["selected"]["角度"] = false;
        myChart.clear();
        myChart.setOption(opt);

        myChart.on('legendselectchanged', function (params) {
            var name = params.name;
            var Checked = params.selected['角度'];
            if (name == '角度') {
                alert(1)
            }

        });

    } 
    function formatterSettingFun(params, ticket, callback) {
         var res = '<div><p>注意：' + params[0].name + '</p></div>'
        for (var i = 0; i < params.length; i++) {
            var seriesName = String(params[i].seriesName);
            var titleName = seriesName+"值";
            var unit = "mm";
            if (i == 2)
            { unit = "°c"; }
            res += '<p ><span  style=" background-color:' + params[i].color + '; display:inline-block ;  width:10PX;height:10PX;border-radius:50%;  opacity:0.5;"> </span>' + titleName + ':' + params[i].data + unit + '</p>'
        }
        setTimeout(function () {
            //// 僅爲了模擬異步回調 
            //callback(ticket, res);
        }, 1000)
        return res;
    }
    //獲取圖表初始化
    function GetDefaultOption(name, dataX) {
        return {
            title: { text: name, x: 'center', y: 'top' },
            tooltip: { trigger: 'axis' },
            legend: { data: [], x: 'left', y: 'top' },
            dataZoom: { show: true, start: 0 },
            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
            toolbox: { feature: { saveAsImage: {}, dataZoom: {}, restore: {} } },
            xAxis: { type: 'category', boundaryGap: false, data: dataX },
            yAxis: { type: 'value' },
            series: []
        };
    }

</script>