关于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,心愿对你有所帮忙,让咱们一起致力走向巅峰!