设置Echarts折线图自定义属性

最新推荐文章于 2024-05-02 09:33:51 发布

原创最新推荐文章于 2024-05-02 09:33:51 发布 · 4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #折线图 #属性

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用Echarts库来设置折线图的各种自定义属性，包括线条颜色、点的形状、数据标签等，帮助开发者创建个性化的数据可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var option = {
        backgroundColor: '#FFF0F5',
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          data: ['expected', 'actual']
        },
        //  图表距边框的距离，可选值：'百分比' || 数值（单位px）
        grid: {
            top: 10,   
            left: 10,
            right: 10,
            bottom: 20,
            top: 30,
            containLabel: true,
        }, 
        // 提示框，悬浮点
        tooltip: {
          trigger: 'axis',
          //当鼠标移动到数值时候，在X轴Y轴显示数值
          axisPointer: {
            type: 'cross'
          },         
        },
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
        xAxis: {
          //网格样式
          splitLine: {
            show: true,
            lineStyle:{
              color: ['#fff'],
              width: 1,
              type: 'solid'
            }
          },
          //x轴颜色
          axisLine:{
            lineStyle:{
              color: ['#fff'],
              width: 1,
              type: 'solid'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            color: "#ff0" //刻度线标签颜色
          },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          data: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#fff'
            }
          },
        },
        series: [
          {
            name: 'expected', itemStyle: {
	            normal: {
	              color: '#FF005A',
	              lineStyle: {
	                color: '#fff',//线条颜色
	                width: 2
	              }
	            }
	          },
            data: [820, 932, 301, 1434, 1290, 1330, 1320],            
	        itemStyle : {//每个坐标点圆点颜色
	         	normal : {
	              color:'red',//圆点外圈颜色
	              lineStyle:{
	                color:'#fff'
	              }
	            }
	        },
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
          }, 
          {
            name: 'actual',
            data: [620, 732, 941, 834, 1690, 1030, 920],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },
        ],
        color: ['#00EE00', '#FF9F7F']