Ecarts histogram assembly package 2

Time:2021-8-29

Ecarts histogram assembly package 2

1. Development environment Vue + echarts
2. Computer system Windows 10 professional edition
3. In the process of developing with Vue + ecarts, we often draw histogram. The following is my encapsulation of ecarts histogram components. I hope it will be helpful to you.
4. Add the following code to the template:

<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",
                    //Sets the color of solid line points
            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" / * multiple side-by-side columns set the spacing between columns * /,
            Barcategorygap: "0" / * multiple side-by-side columns set the spacing between columns * /,
          },
          {
            name: "",
            type: "line",
            showSymbol: true, 
            Symbol: 'circle', // set as solid point 
            Symbolsize: 4, // set the size of the solid point 
            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;
      //Specify configuration items and data for the chart
      this.myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

5. The renderings are as follows:
Ecarts histogram assembly package 2
6. The sharing of this issue ends here. Isn’t it nice? I hope it will help you. Let’s work together to reach the peak!

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]