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