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