Echarts 系列之折線圖、柱狀圖相關配置

本文主要介紹折線圖、柱狀圖的自定義樣式相關配置。

 

1、柱狀圖實現背景柱子

 

代碼實現如下：

series: [
        {
          type: 'bar',
          tooltip: {
            show: false,
          },
          itemStyle: {
            //背景漸變
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  { offset: 0, color: 'rgba(18,7,30,1)' },
                  { offset: 1, color: 'rgba(5, 16, 30, 1)' },
                ],
              },
            },
          },
          silent: true,
          //柱子做背景的時候有用
          barGap: '-100%',
          //高度可根據自己的實際情況制定
          data:[],
        },
        {
          name: 'title',
          type: 'bar',
          itemStyle: { 
           //柱圖漸變
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1580ff' },
                { offset: 0.5, color: '#1596ff' },
                { offset: 1, color: '#15afff' },
              ]),
            },
          },
          //自己的真是數據
          data:[],
        },
      ],

 

2、自定義標線

名稱	效果
symbol	標線兩端的標記類型
label	標線的文本
lineStyle	標線的樣式：顏色、類型、寬度等設置
data	標線的數據，具體可查看官網

 

  markLine: {
          silent: true,
          data: [
          //數據的平均值作為基線
            {
              type: 'average',
            },
          ],
         //標線的兩端不設置標志
         symbol: ['none', 'none'],
  },

注意：如果加入配置后未出現標線，檢查一下是否引入 標線的配置！！

 

3、折線圖漸變

 

名稱	效果
itemStyle	圖形樣式（3.0內部必須加入normal）
areaStyle	區域填充樣式。

 

實現代碼如下：

series: [
        {
          name: 'XXX',
          //默認顏色
          color: ['#157dff'],
          //數據自定義,我這里只是變量
          data:values,
          type: 'line',
         //不加標記點
          symbol: 'none',
          //曲線平滑
          smooth: true,
          //區域漸變
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(0,104,210,0.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,104,210,0.1)',
                },
              ]),
            },
          },
        },
      ],

 

4、圖標充滿整個容器，加上好看的邊框(如：上圖)。

//容器
<div  className={styles['chart-left-one']} ref={this.chartLeftOneRef}/><div>

//圖表鋪滿整個容器
grid: {
　　left: '0',
　　right: '0',
　　top: '0',
　　bottom: '0',
　　height: 'auto',
},
xAxis: {
　　type: 'category',
　　boundaryGap: false,
　　//不顯示X軸
　　show: false,
　　data: keys,
},
yAxis: {
　　type: 'value',
　　//不顯示Y軸
　　show: false,
},

 .chart-left-one {
          width: 100%;
          height: 70%;//容器寬高自定義 //容器加邊框
          border: 1px solid; //邊框樣式
          border-image: linear-gradient(
              -90deg,
              rgba(21, 125, 255, 0.2),
              rgba(21, 125, 255, 0.9)
            )
            30 30;
  }    

 

 （完）