Echarts常用柱状图

Echarts常用柱状图

最近做可视化比较多，就常用的图表类型做了一下总结。

因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。

这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可。

上篇博客有写 echarts 图表组件封装模板，vue2、vue3都有可以参考，链接附上​​echarts图表组件封装模板​​

1.渐变色柱状图

2. 堆叠柱状图

3. 带有标记线柱状图

4. 立体柱状图

5. 柱状图折线图滑动光点

6. 象形柱状图

7.  一条横向格子柱状图(表示PH值等)

8.  紧凑分格柱状图

9. 圆角柱状图

option = { backgroundColor: "#080b30", title: { show: false, text: "汪琦玲-拉动时间轴演示", textStyle: { align: "center", color: "#fff", fontSize: 20, }, top: "5%", left: "center", }, tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, grid: { left: "4%", right: "4%", bottom: "10%", top: "16%", containLabel: true, }, legend: { // data: ["1", "2", "3"], right: fontChart(10), top: fontChart(12), textStyle: { color: "rgba(255, 255, 255, 0.8)", fontSize: fontChart(14) }, icon: 'circle', itemWidth: fontChart(12), itemHeight: fontChart(10), // itemGap: 35 }, xAxis: { type: "category", data: this.xValue, axisLine: { lineStyle: { color: "#274452", } }, axisTick: { show: false, alignWithLabel: true }, axisLabel: { show: true, // interval: 0, // rotate: fontChart(12), color: 'rgba(255, 255, 255, 0.8)', //更改坐标轴文字颜色 fontSize: fontChart(14), //更改坐标轴文字大小 align:"center" } }, yAxis: { type: "value", // max: "1200", axisLine: { show: true, lineStyle: { color: "#274452", } }, axisTick: { show: false, alignWithLabel: true }, splitLine: { show: true, lineStyle: { color: "#293a4c", type: 'dashed' } }, axisLabel: { show: true, // interval: 0, // rotate: fontChart(12), color: 'rgba(255, 255, 255, 0.8)', //更改坐标轴文字颜色 fontSize: fontChart(14), //更改坐标轴文字大小 } }, dataZoom: [ { show: false, height: 12, xAxisIndex: [0], bottom: "8%", start: 10, end: 90, handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", handleSize: "110%", handleStyle: { color: "#d3dee5", }, textStyle: { color: "#fff", }, borderColor: "#90979c", }, { type: "inside", show: true, height: 15, start: 1, end: 35, }, ], series: [ { name: "冷机", type: "bar", barWidth: "6%", itemStyle: { color: '#0968f5', barBorderRadius: 12, }, data: this.yValue1, }, { name: "冷却塔", type: "bar", barWidth: "6%", itemStyle: { color: '#f27359', barBorderRadius: 11, }, data: this.yValue2, }, { name: "冷冻泵", type: "bar", barWidth: "6%", itemStyle: { color: '#f6ea90', barBorderRadius: 11, }, data: this.yValue3, }, { name: "冷却泵", type: "bar", barWidth: "6%", itemStyle: { color: '#4dd5fd', barBorderRadius: 11 }, barGap:"100%", //不同系列的柱间距离，为百分比 // barCategoryGap: '20%', //同一系列的柱间距离，默认为类目间距的20%，可设固定值 data: this.yValue4, } ]};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。