【echarts折线图】详解一、折线效果 && 折线点效果-蒲公英云

【echarts折线图】详解一、折线效果 && 折线点效果

迷南。 2022-02-03 12:39 855阅读 0赞

备忘：

关于折线图的数据折线显示更多配置： https://echarts.baidu.com/option.html\#series-line

<script>
    option = {
        visualMap:{     //视觉映射  渐变过渡等效果
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,     //控制最小的数据显示色
            max: 60,    //控制最大的数据显示色
            // color:["#4C8400","#80BB0D","#B4DA20","#B6DA8C"], //折线渐变色 ， 由大到小排序  ECharts2的用法，ECharts3用inRange，如下
            inRange: {
                color: ["#4C8400","#80BB0D","#B4DA20","#B6DA8C"],
                symbolSize: [30, 100]   //折线点的过渡大小， 从小到大
            }
        },
       tooltip: {    //鼠标移入效果
            trigger: 'axis',
            formatter: function(cur){    //formatter有  字符串模板 和 回调函数格式 两种
                //详情： https://www.echartsjs.com/zh/option.html#series-line.tooltip.formatter
                //通过参数 cur 基本就可以获取想要的数据了，当然也可以自定义数据
                console.log(cur)
                //最后把要展示的数据记得用return 出来
                return 
            }
        },
        xAxis: {        //x轴样式与数据
            data: ["a","b","c","d","e"],
            axisLine:{
                lineStyle:{
                    color:"#D8E3EA",
                }
            },
            axisLabel:{
                interval:55 ,                //X轴显示文字 间隔，数据太多，每格55个 显示一次 ， 有时候太多显示不全，可以为0，强制全部显示，
                fontSize:12,
                color:"#fff",
            },
            splitLine: {show: false}
        },
        yAxis: {        //y轴样式与数据
            splitLine: {
                show: true,
                lineStyle:{
                    color:"#A5C1D8"
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#D8E3EA",
                }
            },
            axisLabel:{
                interval:55 ,
                fontSize:14,
                color:"#fff",
            },
        },
        series: {
            type: 'line',
            showSymbol: false,
            data: [1,2,3,4,5,6,7,8],
            symbol: 'circle',   //折线点的图形
            symbolSize: 10,     //图形大小
            itemStyle:{     //图形点和折线的颜色， 可以是单一的，也可以是渐变的
                // color:"#f00"  //单一
                color:{     //渐变  属性值 同CSS
                    type:"linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                }
            },
            lineStyle:{     //单独配置折线图线条的显示效果， 配置基本和 itemStyle差不多
                color:"#f0f",        //颜色
                width:5,    //线宽
            },
            areaStyle:{   //折线下面区域块的样式
                color:"#fff"
            }
        },
    };
</script>