echarts2.0修改markpoint及markline的属性（markpoint显示隐藏，并且实现自定义图例）

来源：互联网发布：淘宝助理设置橱窗推荐编辑：程序博客网时间：2024/06/03 22:58
简单的东西，直接上代码，不多解释，感觉码字比码代码要累多了《@中国人叔叔-lt》
<!DOCTYPE>/** * (C) Copyright 2017-2027, by liting. * Project Info: liting * * @author liting * Time:2017/12/6  15:42 * @version 1.0 * @see */<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>曲线图</title>    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>    <style>        /*图例的样式*/        .legend-class {            position: absolute;            left: 100px;            top: 0px;            max-width: 1040px;            overflow-x: auto;            overflow-y: hidden;            white-space: nowrap;        }        .legend-class ul {            text-align: center;            list-style-type: none;            margin-left: 10px;            padding: 0px;            display: inline-block;        }        .legend-class ul li {            display: block;            float: none;            margin: auto;            width: 30px;            height: 20px;            border: 1px solid #ff9fe6;        }        .legend-class ul li:hover {            border: 1px solid #f1d3d3;        }        .legend-class ul span {            margin-left: 0px;            width: 100%;            height: 100%;        }    </style>    <script type="text/javascript">        //图例线条颜色，按顺序来，不够需要添加        var gar_colors = ['#CC6666', '#FFA026', '#FF0200', '#666633', '#FF00CC', '#CC6633', '#9933FF', '#CC33CC', '#33CCFF', '#003399', '#9999FF', '#FFCC00', '#CC99FF', '#FF3300', '#3333FF', '#339900', '#FF9900'];        var gobj_chart;        //数据        var datas = '[{"name":"这是第一条线","aitds": "16408","datas": [[1,2],[2,3],[3,5],[4,15],[5,10]]},{"name":"这是第2条线","aitds": "16405","datas": [[1,3],[2,1],[3,4],[4,10],[5,15]]}]';        //页面加载完成执行        $(function () {            var series = [];            var dataAr = JSON.parse(datas);            var legendStr = "";            for (var i = 0; i < dataAr.length; i++) {                var lineObj = {};                var dataObj = dataAr[i];                lineObj.name = dataObj.name;                lineObj.itemStyle = {normal: {color: gar_colors[i]}};                //用来作为唯一识别的自定义属性                lineObj.id = dataObj.aitds;                lineObj.type = "line";                lineObj.data = dataObj.datas;                lineObj.markPoint = {data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}]};                series.push(lineObj);                //组织自定义图例                legendStr += "<ul title='" + lineObj.name + "' onmouseover='highLightData(\"" + lineObj.id + "\",\"#f1394e\");' onmouseout='highLightData(\"" + lineObj.id + "\",\"" + gar_colors[i] + "\");' onclick='refreshData(\"" + lineObj.id + "\")'>";                legendStr += "<li style='background: " + gar_colors[i] + ";' ></li>"                legendStr += "<span style='display: block'>" + lineObj.name + "</span>"                legendStr += "</ul>";            }            //自定义legend 图例            $("#legend_div").html(legendStr);            //数据组织            var option = {                title: {                    text: '',                    subtext: ''                },                tooltip: {                    trigger: 'axis'                },                calculable: true,                xAxis : [                    {                        type : '',                        splitNumber:5                    }                ],                yAxis : [                    {                        type : 'value'                    }                ],                series: series            };            var charHtmlObj = document.getElementById('mainA');            //初始化echarts            gobj_chart = echarts.init(charHtmlObj);            gobj_chart.setOption(option);        });        //修改markPoint大小，从而做到显示隐藏        function refreshData(paName) {            //alert(paName);            //更新数据            var option = gobj_chart.getOption();            for (var i = 0; i < option.series.length; i++) {                //alert(option.series[i].id);                if (option.series[i].id == paName) {                    for (var j = 0; j < option.series[i].markPoint.data.length; j++) {                        if (option.series[i].markPoint.data[j].symbolSize == 0) option.series[i].markPoint.data[j].symbolSize = 50;                        else option.series[i].markPoint.data[j].symbolSize = 0;                    }                }            }            gobj_chart.setOption(option);        }        //修改markPoint大小，从而做到显示隐藏        function highLightData(paName, paColor) {            //更新数据            var option = gobj_chart.getOption();            for (var i = 0; i < option.series.length; i++) {                if (option.series[i].id == paName) {                    option.series[i].itemStyle.normal.color = paColor;                }            }            gobj_chart.setOption(option);        }    </script></head><body><!--图例--><div id="legend_div" class="legend-class" style="z-index: 10000"></div><!--线图--><div id="mainA" style="width: 1040px;height:400px;"></div></body></html>
阅读全文
0 0