echarts Bar graph component encapsulation 2

1. development environment vue+echarts
2. computer system windows10 pro
3. In the use of vue+echarts In the process of development , We often draw a histogram , Here is my answer to echarts Encapsulation of histogram components , I hope it helped 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",
// Set the color of solid line dots
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 to 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 :

6. The sharing of this issue is over here , Isn't it very nice, I hope it helped you , Let's work together to get to the top !