echarts使用筆記

一、設置echarts折線顯示為虛線，設置線條寬度

series: [
    {
        type: 'line',
        name: '預警線',
        smooth:false,   //關鍵點，為true是不支持虛線，實線就用true
        itemStyle:{
            normal:{
                lineStyle:{
　　　　　　　　　　　　color: '#FF0000',//注意這樣顏色設置的位置

                    width:3,//設置線條寬度
                    type:'dotted'  //設置線條顯示：'dotted'虛線 'solid'實線
                }
            }
        },
        data: fundyield    //這個是你自己的數據           
    }
]

 二、echarts 圖表icon屬性

//在legend下面設置
data: [{name: '預警線', icon: 'line'}, {name: '監控值', icon: 'line'}]

取值范圍

包括 circle[圓]，rect[正方形] ，roundRect[圓角正方形]，triangle[三角形]，diamond[菱形]，pin[點]，arrow[箭頭]，line[直線]，none[不顯示]

如有特殊要求可以使用featureImageIcon

 三、echarts修改字體大小

tooltip: {//鼠標懸浮提示字體大小
            trigger: 'axis',
            textStyle: {
                fontSize: getDpr()
            }
        },
        legend: {//標題
            data: ['事物量'],
            textStyle: {
                color: '#adadad',
                fontSize: getDpr()
            },
        },
xAxis: [{//右下角橫軸名稱
            name: '時間',
            nameTextStyle: {
                color: '#adadad',
                fontSize: getDpr()
            },
            nameGap: 6,
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    color: '#adadad',
                    fontSize: getDpr(),
                }
            },
            data: xData
        }],
yAxis: [{//y軸名稱
            type: 'value',
            name: "單位：次",
            nameTextStyle: {
                color: '#adadad',
                fontSize: getDpr()
            },
            interval: 6000,
            nameGap: 11,
            splitLine: { //網格線
                show: true,
                lineStyle: {
                    color: ['#435357'],
                    type: 'solid'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#adadad',
                    fontSize: getDpr(),
                }
            },
        }],
series: [{//每項data中修改字體大小
            type: 'pie',
            radius: '70%',
            center: ['50%', '60%'],
            color: ['rgba(78, 181, 255, 0.74)', 'rgba( 0, 255, 255,0.1)'],
            data: [{
                name: '已用磁盤空間' + '\n' + used + 'TB',
                value: used,
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: '#fff',
                            fontSize: getDpr(),
                        }
                    }
                }
            }]
}]
//其中getDpr()為一個方法，根據屏幕大小去加載不同字體大小
//圖表根據屏幕大小去判斷字體大小
var getDpr = function getDpr() {
    var windowWidth = $(window).width();
    if (windowWidth < 1920) {
        return 12
    }
    if (windowWidth >= 1920 && windowWidth <= 3840) {
        return 18
    }
    if (windowWidth > 3840 && windowWidth <= 5760) {
        return 30
    }

};

四、echarts折線根據值變色。

需求是一條折線【指標值】表示某個指標時間區間內的值，當這個值超過某個閾值是變色預警。對比條件是另一條折線預警值。采取的方案是【指標值】采取兩個數組，一個存放未超標的，一個存已超標的。需要注意的是兩點成線，因此數組有值得記錄必須有兩個連續的坐標。

performanceChartOption['series'] = [];
                    performanceChartOption['series'].push({
                        type: 'line',
                        name: '預警線',
                        smooth:false,   //關鍵點，為true是不支持虛線，實線就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    color: '#FF0000',//注意這樣顏色設置的位置
                                    width:3,//設置線條寬度
                                    type:'dotted'  //設置線條顯示：'dotted'虛線 'solid'實線
                                }
                            }
                        },

                        data: warnArray
                    });
                    performanceChartOption['series'].push({
                        type: 'line',
                        name: '監控值',
                        itemStyle: {color: '#5B9BD5'},
                        data: monitoriteArray
                    });
                    performanceChartOption['series'].push({
                        type: 'line',
                        name: '',//監控值
                        itemStyle: {color: '#B03A5B'},
                        /*label: {show: true},*/
                        data: monitoriteArrays
                    });
                    performanceChartOption['legend'] = {
                        x: '80%', itemWidth: 12, itemHeight: 12, itemGap: 16, selectedMode: true,textStyle: {fontSize: 16},
                        data: [{name: '預警線', icon: 'line'}, {name: '監控值', icon: 'line'}]
                    };