Echarts常用配置

Echarts常用配置

 const option = {
          title: {
            text: "折线图",
            textStyle: {
              color: '#fff',
              fontSize: this.fontSize(0.4)
            }
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              show: true,
              margin: this.fontSize(0.4),
              textStyle: {
                color: '#fff', //更改坐标轴文字颜色
                fontSize: this.fontSize(0.4) //更改坐标轴文字大小
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff' //更改坐标轴颜色
              }
            },
            data: ['00:00:00', '00:00:05', '00:00:10', '00:00:15', '00:00:20', '00:00:25', '00:00:30', '00:00:35',
              '00:00:40'
            ]
          },
          yAxis: {
            type: "value",
            axisLabel: {
              show: true,
              margin: this.fontSize(0.4),
              textStyle: {
                color: '#fff', //更改坐标轴文字颜色
                fontSize: this.fontSize(0.4) //更改坐标轴文字大小
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 3,
                color: '#fff' //更改坐标轴颜色
              }
            }
          },
          grid: {
            top: '10%',
            left: '10%',
            bottom: this.fontSize(1)
          },
          tooltip: {
            show: true
          },
          series: [{
            name: 'WS001',
            type: "line",
            smooth: true,
            label: {
              color: "#fff",
              fontSize: this.fontSize(0.4)
            },
            lineStyle: {
              color: '#3FCF55',
              width: 2,
              type: 'solid'
            }, //折线条颜色
            itemStyle: {
              normal: {
                color: '#3FCF55'
              }
            }, //折线点颜色
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#92FE9D' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#004B76' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [0, 3, 3, 4, 5, 4, 2, 2, 0]
          }]
        };
chenj

发表评论