美文网首页
Echars折线图下面如何有阴影

Echars折线图下面如何有阴影

作者: 甘道夫老矣 | 来源:发表于2019-06-19 14:15 被阅读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);
    

    相关文章

      网友评论

          本文标题:Echars折线图下面如何有阴影

          本文链接:https://www.haomeiwen.com/subject/aerdqctx.html