【echarts折線圖】詳解 一、 折線效果 && 折線點效果

備忘：

關於折線圖的 數據折線顯示更多配置： 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>

需要注意的是 visualMap 和 series 存在一定的樣式衝突， 不能同時使用