echarts的使用

echarts官网配置项说明   echarts.min.js免费下载

自己在使用echarts的时候，走过不少弯路，以此记录下来，希望可以让大家少走些弯路！

<!-- 引入 ECharts 文件 -->
    <script src="Frame/echarts/echarts.min.js"></script>

<!--加载echarts的html标签-->
<div id="echartsId"></div>

 1.显示全部类目，使用 interval:0，但如果类目过多，会默认隐藏第一项和最后一项，所以需要 rotate:-40 //旋转，可以显示更多类目；

2.toolbox鼠标移上去后，提示的内容部分被挡住，可以在title最后加空格避免；

var timeData = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09',10,11,12,13,14,15,16,17,18,19,20,21,22,23, '00', '01', '02', '03', '04', '05', '06', '07', '08', '09',10,11,12,13,14,15,16,17,18,19,20,21,22,23],//x轴时间
    yPredData = [236,236,400,400,400,400,400,400,400,400,400,400,400,400,400,400,236,124,145,186,400,236,236,236,236,236,236,236,236,236],//预测值
    yActualData = [220,220,220,123,133,180];//实际值    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echartsId"));
    let option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                // 自定义鼠标移入图表的提示框内容
                let firstParams = params[0];
                let secParams = params[1];
                let html = "";
                let date;
                let selDate = $("#dataDate").datebox('getValue');
                if(firstParams.dataIndex>23){
                    selDate = new Date(selDate).getTime();
                    date = formatDate(selDate);
                }else{
                    selDate = new Date(selDate).getTime()-86400000;
                    date = formatDate(selDate);
                }
                if(firstParams){
                    let actHtml = `<span class="icon-actual">`+firstParams.seriesName+`：`+firstParams.data+`</span> `;//实际值图标
                    html = date+" "+firstParams.name+":00"+`<br>`+actHtml+`<br>`;
                }
                if(secParams){
                    let predHtml = `<span class="icon-pred">`+secParams.seriesName+`：`+secParams.data+`</span>  `;//预测值图标
                    html += predHtml+`<br>`;
                }
                return  html;
            }
        },
        legend: {
            itemWidth: 30,
            itemHeight: 40,
            data: [{
                name:'预测值',
                icon:'image://img/predLine.svg'
            },
            {
                name:'实际值',
                icon:'image://img/actualLine.svg'
            }]
        },
        toolbox: { //查看邻区负荷按钮
            feature: {
                myTool: {
                    show: true,
                    title: '查看邻区负荷                 ',//加空格避免部分文字被挡住
                    icon: 'image://img/actualValue.svg',
                    onclick: function (){
                        //弹出邻区负荷界面
                        alert("弹出邻区负荷界面");
                    }
                }
            }
        },
        dataZoom: [{//最底部拉条
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
        }],
        grid: {//图标的边距设置
            left: '3%',
            right: '5%',
            top:'20%',
            height:'58%',
            containLabel: true
        },
        xAxis:{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                interval:0,//0显示全部类目，1间隔1项显示
                rotate:-40  //时间旋转倾斜可显示更多
            },
            data: timeData
        },
        yAxis: {},//不设置可以自动根据数据的最大值和最小值生成
        series: [
            {
                name: '预测值',
                type: 'line',
                itemStyle : {
                    normal : {
                        lineStyle:{
                            color:'rgba(63, 130, 221, 1)'//图表中线条的颜色
                        }
                    }
                },
                data: yPredData
            },
            {
                name: '实际值',
                type: 'line',
                itemStyle : {
                    normal : {
                        lineStyle:{
                            color:'rgba(108, 203, 132, 1)'//图表中线条的颜色
                        }
                    }
                },
                data: yActualData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

效果图：

 图表每个部分的说明：