echarts使用笔记

一、设置echarts折线显示为虚线，设置线条宽度

series: [
    {
        type: 'line',
        name: '预警线',
        smooth:false,   //关键点，为true是不支持虚线，实线就用true
        itemStyle:{
            normal:{
                lineStyle:{
　　　　　　　　　　　　color: '#FF0000',//注意这样颜色设置的位置

                    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: '已用磁盘空间' + '
' + 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',//注意这样颜色设置的位置
                                    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'}]
                    };