Echars折线图下面如何有阴影

2019-06-19  本文已影响0人  甘道夫老矣
11.jpg
  var option = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '0%',
              right: '4%',
              bottom: '2%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['南宁市','桂林市','柳州市','贵港市','河池市','来宾市','崇左市','百色市'],
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#516891',
                  fontSize:'12',
                  fontWeight: 'bold'
                }
              },
              axisLine:{
                show: true,
                lineStyle:{
                  color:'#111739',
                  width:2,   //这里是坐标轴的宽度,可以去掉
                }
              },
              splitLine: {
                show:true,
                //  改变轴线颜色
                lineStyle: {
                  // 使用深浅的间隔色
                  color: ['#516891'],
                  opacity:0.4
                }
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#516891',
                  fontSize:'12',
                  fontWeight: 'bold'
                }
              },
              axisLine:{
                show: true,
                lineStyle:{
                  color:'#111739',
                  width:1,   //这里是坐标轴的宽度,可以去掉
                }
              },
              splitLine: {
                show:false,
              },
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320,1350],
              type: 'line',
              lineStyle: {
                color: '#195BA3'
              },
              areaStyle: {//重点在这里
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0.5, color: '#03133B' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#195EA9' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
                opacity:0.5
              }
            }]
          };
          myChart.setOption(option);
上一篇下一篇

猜你喜欢

热点阅读