vue eachart创建

  initLevelChart() {
      var levelChart = echarts.init(document.getElementById('level'))
      var option = {
        xAxis: {
          type: 'category',
          data: ['春', '夏', '秋', '冬'],
          axisLine: {       //x轴显示
            "show": true,
          },
          axisTick: {
            "show": false   //去掉x轴刻度线
          },
          //坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#00bbff',
              width: 2
            }
          },
          // x轴文字旋转
          axisLabel: {
            rotate: 0,
            interval: 0,
            interval: 0,  //设置 X 轴数据间隔几个显示一个，为0表示都显示 
            color: "rgba(230,247,255,0.5)"  //坐标轴的文本颜色
          },
        },
        legend: {
          data: ['浮游植物','浮游动物','潮间带生物','浅海大型底栖生物'],
          textStyle: {
            color: '#fff'
          },
          top: '10'
        },
        yAxis: {
          name: '等级',
          type: 'value',
          // interval: 10,
          min: 0, // 配置 Y 轴刻度最小值
          max: 5,  // 配置 Y 轴刻度最大值
          // splitNumber:10,  // 配置 Y 轴数值间隔
          nameTextStyle: {
            color: 'rgba(230,247,255,0.5)', //  字体颜色
            fontSize: 12, //  字体大小
            fontWeight: '400',
            //关键代码
            padding: [0, 0, -0, -30] //标题位置调整 上 右 下 左
          },
          splitLine: {           //分割线
            show: true,     //控制分割线是否显示
            lineStyle: {       //分割线的样式
              color: ['rgba(255,255,255,0.3)'],
              width: 2,
              type: 'dashed'
            }
          },
          axisLine: {       //y轴不显示
            "show": false
          },
          axisTick: {       //y轴刻度线不显示
            "show": false
          },
          axisLabel: {
            color: "#BACCF4", //刻度线标签颜色
            fontSize: 14,
            formatter: function (value) {
              if (value === 1) {
                return 'I'
              } else if (value === 2) {
                return 'II'
              } else if (value === 3) {
                return 'III'
              } else if (value === 4) {
                return 'IV'
              } else if (value === 5) {
                return 'V'
              }
            }
          },

        },
        grid: {          //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
          left: '37px',
          right: '26px',
          bottom: '1%',
          containLabel: true,   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
        },
        series: [
          {
            name: '浮游植物',
            data: this.springData,
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              textStyle: {  // 文字样式
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
              },
              formatter: function (value) {
                if (value.data === 1) {
                  return 'Ⅰ'
                } else if (value.data === 2) {
                  return 'Ⅱ'
                } else if (value.data === 3) {
                  return 'Ⅲ'
                } else if (value.data === 4) {
                  return 'Ⅳ'
                } else if (value.data === 5) {
                  return 'Ⅴ'
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#10D3FF' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#10D3FF' // 100% 处的颜色
                  }
                ]
              },

            },
          },

          {
            name: '浮游动物',
            data: this.summerData,
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              textStyle: {  // 文字样式
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
              },
              formatter: function (value) {
                if (value.data === 1) {
                  return 'Ⅰ'
                } else if (value.data === 2) {
                  return 'Ⅱ'
                } else if (value.data === 3) {
                  return 'Ⅲ'
                } else if (value.data === 4) {
                  return 'Ⅳ'
                } else if (value.data === 5) {
                  return 'Ⅴ'
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#EB9C36' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#EB9C36' // 100% 处的颜色
                  }
                ]
              },

            },
          },
          {
            name: '潮间带生物',
            data: this.autumnData,
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              textStyle: {  // 文字样式
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
              },
              formatter: function (value) {
                if (value.data === 1) {
                  return 'Ⅰ'
                } else if (value.data === 2) {
                  return 'Ⅱ'
                } else if (value.data === 3) {
                  return 'Ⅲ'
                } else if (value.data === 4) {
                  return 'Ⅳ'
                } else if (value.data === 5) {
                  return 'Ⅴ'
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#10EBE3' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#10EBE3' // 100% 处的颜色
                  }
                ]
              },

            },
          },
          {
            name: '浅海大型底栖生物',
            data: this.winterData,
            type: 'bar',
            barWidth: 12, //设置柱子宽度
            color: 'blue',
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(190,216,240,0.06)'
            },
            label: {  //在柱状图上显示数据
              show: true,
              position: 'top',
              textStyle: {  // 文字样式
                color: '#fff',
                fontWeight: 500,
                fontSize: 14,
              },
              formatter: function (value) {
                if (value.data === 1) {
                  return 'Ⅰ'
                } else if (value.data === 2) {
                  return 'Ⅱ'
                } else if (value.data === 3) {
                  return 'Ⅲ'
                } else if (value.data === 4) {
                  return 'Ⅳ'
                } else if (value.data === 5) {
                  return 'Ⅴ'
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            markPoint: {
              symbol: 'rect',
              symbolSize: '15',
            },
            itemStyle: {  // 柱状图渐变
              color: {
                type: 'linear',
                x: 0,  //右
                y: 0,  //下
                x2: 0,  //左
                y2: 1,  //上
                colorStops: [
                  {
                    offset: 0,
                    color: '#115FEA' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#115FEA' // 100% 处的颜色
                  }
                ]
              },

            },
          },
        ]
      };
      levelChart.setOption(option);
      // window.addEventListener('resize', () => {
      //   levelChart.resize()
      // })
    },