echarts的样式修改

scener```y

于 2021-12-30 11:03:00 发布

阅读量605

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_47763287/article/details/122222333

版权

本文介绍了如何使用Echarts库定制折线图的样式，包括线条样式、线条区域的颜色渐变、折线拐点以及拐点提示框的样式调整，帮助提升图表的视觉效果。

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

1、折线图线条样式修改

const option = {
        xAxis: {
          type: 'category',
          data: ['篮球','足球','橄榄球','羽毛球'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: ['2','1','1','4'],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle:{
                   width:3,            //折线宽度
                   color:"#FF0000",    //折线颜色
                }
              },
            }, 
          },
        ],
      };

2、折线图线条区域颜色渐变样式修改

const option = {
        xAxis: {
          type: 'category',
          data: ['篮球','足球','橄榄球','羽毛球'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: ['2','1','1',&

最低0.47元/天解锁文章