echarts图表（三条折线图）

最新推荐文章于 2024-06-28 15:09:23 发布

小敏子爱看蜡笔小新

最新推荐文章于 2024-06-28 15:09:23 发布

阅读量1k

点赞数

文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_58511370/article/details/126163640

版权

areainit(dataoneArr, datatwoArr, datathreeArr, Cities) {
      this.myheaps.setOption({
        title: [                                //标题
          {
            left: 120,
            text: '案件区域情况',
            textStyle: {
              color: '#30e4ff',
              fontSize: 23,
              fontWeight: 500
            }
          }
        ],
        tooltip: {                              //提示信息
          trigger: 'axis'
        },
        xAxis: {                                //x轴信息
          type: 'category',
          data: Cities,
          axisTick: { show: false },            //取消刻度
          axisLabel: {                          //提示设置刻度
            textStyle: {
              color: '#fff'
            },
            formatter: function(value) {         //为垂直方向书写
              return value.split('').join('\n')
            }
          },
          axisLine: {                           //x轴线
            show: true,
            lineStyle: {
              type: 'dashed',                    //虚线
              color: '#fff'
            }
          }
        },
        grid: {                                 //图表距离边框的距离
          left: '5%',
          right: '5%',
          bottom: '0',
          top: '20%',
          containLabel: true
        },
        legend: {                                 //图例
          padding: [50, 50, 0, 0],                //图例在图中的位置
          itemHeight: 10,
          itemWidth: 10,
          data: [
            {
              name: '主动监察',
              icon: 'rect'
            },
            {
              name: '举报投诉',
              icon: 'rect'
            },
            {
              name: '立案',
              icon: 'rect'
            }
          ],
          textStyle: {                         //图例文字
            color: '#fff',
            fontSize: 12
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            splitLine: {                  //y轴分割线
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisTick: { show: false },    //刻度
            axisLine: { show: false }    //轴线
          }
        ],
        series: [
          {
            name: '主动监察',
            data: dataoneArr,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#ffe000' //改变折线颜色
                },
                areaStyle: { type: 'default' },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#ffe000' },
                  { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                  { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
                ])
              }
            }
          },
          {
            name: '举报投诉',
            data: datatwoArr,
            type: 'line',
            showSymbol: false,
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#13e850' //改变折线颜色
                },
                areaStyle: { type: 'default' },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#13e850' },
                  { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                  { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
                ])
              }
            }
          },
          {
            name: '立案',
            data: datathreeArr,
            type: 'line',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#0fd5f9' //改变折线颜色
                },
                areaStyle: { type: 'default' },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0fd5f9' },
                  { offset: 0.5, color: 'rgba(98, 199, 98, 0.3)' },
                  { offset: 1, color: 'rgba(98, 199, 98, 0.1)' }
                ])
              }
            }
          }
        ]
      })
    },