vue2的echarts写法

 1.示例1

<template>
  <div class="hello">
    <div id="myChart1212" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
  name: 'HelloWorld',
  data() {
    return {
      myChart: null,
      option: {},
      title: '28'
    }
  },
  mounted() {
    this.drawBar()
  },
  methods: {
    drawBar() {
      this.myChart = echarts.init(document.getElementById('myChart1212'))
      this.myChart.setOption({
        tooltip: {
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: { onZero: false, show: true },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          data: ['A1性能', 'A2性能', 'B1性能', 'B2性能', 'C1性能', 'C2性能', 'D1性能', 'D2性能'],
          boundaryGap: false,
          axisLine: { onZero: false, show: true },
          splitLine: {
            show: false
          }
        },
        grid: {
          left: 25,
          // right: 15,
          // bottom: 15,
          top: 25,
          containLabel: true
        },
        series: [
          {
            data: [100, 100, 100, 80, 100, 100, 100, 100],
            type: 'line',
            smooth: true
          }
        ]
      })
      window.addEventListener('resize', this.myChart.resize)
    }
  }
}
</script>
<style scoped>
.hellow {
  width: 100%;
  height: 100%;
}
</style>

2.示例2

<template>
  <div style="height:100%;width:100%">
    <div style="height:10%;width:100%;font-size: 45px;color:#fff;" class="imgaa">
      <span style="display:inline-block;margin-left:30px;">新鲜水月报比例趋势图</span>
    </div>
    <div class="echa" id="mbyCmh6artnn"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawBar();
  },
  methods: {
    drawBar() {
      this.myChartNt = echarts.init(document.getElementById("mbyCmh6artnn"));
      var option = {
        // backgroundColor: "#424956",

        tooltip: {
          textStyle: {
            fontSize: 35, // 字体大小
            color: "#fff"
          },

          extraCssText: "width:160px;height:140px;",
          trigger: "axis",
          backgroundColor: "rgba(40, 196, 255, 1)",

          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "red"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          }
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [""],
          right: "4%",
          textStyle: {
            fontSize: 12,
            color: "#292f39"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#acabab" // 坐标轴轴线颜色
              }
            },
            axisTick: {
              show: true
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 28
              }
            },

            data: [
              "00：00",
              "02：00",
              "04：00",
              "06：00",
              "08：00",
              "10：00",
              "12：00",
              "14：00",
              "16：00",
              "18：00",
              "20：00",
              "22：00"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            interval: 10,
            axisTick: {
              show: false
            },

            nameTextStyle: {
              fontSize: 15
            },

            axisLine: {
              show: false,
              lineStyle: {
                color: "#acabab" // 坐标轴轴线颜色
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 28
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(201, 201, 201, 0.20)"
              }
            }
          }
        ],
        series: [
          {
            name: "数据",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 15,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 10
              }
            },
            //   areaStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(
            //         0,
            //         0,
            //         1,
            //         0,
            //         [
            //            {
            //             offset: 0,
            //             color: "rgba(97, 128, 255, 1)", // 0% 处的颜色
            //           },
            //            {
            //             offset: 0.5,
            //             color: "rgba(3, 241, 255, 1)", // 0% 处的颜色
            //           },
            //           {
            //             offset: 1,
            //             color: "rgba(255, 234, 4, 1)", // 100% 处的颜色
            //           },
            //         ],
            //         false
            //       ),
            //       shadowColor: "rgba(0, 0, 0, 0.1)",
            //       shadowBlur: 10,
            //     },
            //   },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(97, 128, 255, 1)" // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(3, 241, 255, 1)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 234, 4, 1)" // 100% 处的颜色
                  }
                ])
              },
              emphasis: {
                color: "rgba(4, 252, 254, 1)",
                borderColor: "#fff",
                extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                borderWidth: 12
              }
            },
            data: [5, 13, 20, 36, 23, 45, 23, 60, 20, 36, 23, 85]
          },
          {
            // name: "柱子",
            type: "bar",
            barGap: "-100%",
            barWidth: 65,
            label: {
              normal: {
                color: "red"
              }
            },
            itemStyle: {
              normal: {
                //   borderColor: "red",
                //   borderWidth: "1",
                //   barBorderRadius: 25,
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 255, 255, 0)"
                    },
                    // {
                    //   offset: 0.5,
                    //   color: "rgba(255, 255, 255,1)",

                    // },
                    {
                      offset: 1,

                      color: "rgba(255, 255, 255, 0.20)"
                    }
                  ],
                  global: false
                }
              }
            },
            z: -12,
            data: [
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50,
              50
            ]
          }
        ]
      };

      this.myChartNt.setOption(option);

      // 设置该 chart 的 resize 方法
      window.addEventListener("resize", this.myChartNt.resize);
    }
  }
};
</script>
<style scoped>
.echar {
  color: #fff;
  position: absolute;
  top: 290px;
  left: 660px;
}
.echa {
  height: 85%;
  width: 100%;
  position: relative;
  background-image: url("../../../../assets/img/bcgg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.imgss {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.imgaa {
  margin-bottom: 2px;
  background-image: url("../../../../assets/img/title-short.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>