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

最新推荐文章于 2025-07-09 15:42:19 发布

freedom_文

最新推荐文章于 2025-07-09 15:42:19 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： EChart

本文链接：https://blog.youkuaiyun.com/freedomVenly/article/details/90036575

备忘：

关于折线图的数据折线显示更多配置： 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 
            }
        },
        xAx