关于echarts:echarts柱状图组件封装2

echarts 柱状图组件封装 2

1. 开发环境 vue+echarts
2. 电脑系统 windows10 专业版
3. 在应用 vue+echarts 开发的过程中, 咱们常常会绘制柱状图, 上面是我对 echarts 柱状图组件的封装, 心愿对你有所帮忙。
4. 在模板中增加如下代码:

<template>
  <div class="chenechartsmol1">
    <div id="chenhui22" style="width: 100%; height: 100%"></div>
  </div>
</template>
<style>
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.chenechartsmol1 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /* border: 2px solid yellow; */
}
</style>
<script>
import echarts from "echarts";
export default {
  name: "Chenzzt2",
  data() {return {};
  },
  mounted() {this.$nextTick(() => {this.tt();
    });
  },
  methods: {tt() {
      this.Chenoption = {
        tooltip: {trigger: "axis",},
        grid: {
          top: "0%",
          left: "2%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            show: false,
            data: [
              10,
              12,
              22,
              22,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
            axisPointer: {type: "shadow",},
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            show: false,
          },
          {
            type: "value",
            name: "",
            show: false,
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
                    // 设定实线点的色彩
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
            // barWidth:30,
            barGap: "0" /* 多个并排柱子设置柱子之间的间距 */,
            barCategoryGap: "0" /* 多个并排柱子设置柱子之间的间距 */,
          },
          {
            name: "",
            type: "line",
            showSymbol: true, 
            symbol: 'circle',     // 设定为实心点 
            symbolSize: 4,       // 设定实心点的大小 
            color:"#00808c", 
            yAxisIndex: 1,
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
            ],
          },
        ],
      };
      this.drawChart("chenhui22", this.Chenoption);
    },
    drawChart(drawChartId, Chenoption) {this.myChart = echarts.init(document.getElementById(drawChartId));
      let option = Chenoption;
      // 指定图表的配置项和数据
      this.myChart.setOption(option);
      window.onresize = function () {myChart.resize();
      };
    },
  },
};
</script>

5. 效果图如下:

6. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!