在vue使用三系列柱状图数据封装,和echarts用官方例子不显示图形问题解决
在使用echarts官网对象数组输入格式和最简单的数据集案例的柱状图时,直接复制官网案例只显示x轴,不管是请求来的数据还是静态数据都一样不显示图形,下图为官网案例
后参考博主weixin_43991257,的文章https://blog.csdn.net/weixin_43991257/article/details/124665703,将serise的数据改写成三系列柱状图的数据格式,终于得以正常显示
代码如下:
option = {
title: {
text: '(次)'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ["进","出"],
right: 1,
},
grid: {
left: '0%',
containLabel: true
},
xAxis: {
type: 'category',
data:["天河停车场","南沙停车场","越秀停车场","白云停车场"],
axisLabel:{
show:true,
align:'left',
interval:0,
rotate:-25,
margin:14,
},
},
yAxis: {
type: 'value',
},
series: [
{
name: "进",
type: 'bar',
data: [32,24,65,34],
barWidth: 16,//柱子粗细
barGap:0,//柱子间距
itemStyle:{
normal:{
color:'#c7f9b9'
},
},
smooth: true,
},
{
name: "出",
type: 'bar',
barWidth: 16,//柱子粗细
data: [18,45,32,43],
itemStyle:{
normal:{
color:'#ff5454'
},
},
smooth: true,
}
]
};
最后将请求到的数据封装成series需要的数据格式,以下面这段数据为例
[
{
"type": "MYSQL",
"A: 1,
"B": 7,
"C": 0
},
{
"type": "ORACLE",
"A": 5,
"B": 4,
"C": 0
},
{
"type": "PGSQL",
"A": 0,
"B": 6,
"C": 0
}
]
思路:从上面数据可以看出,我们需要3个系列的柱状图,每个系列的数据应该是以每个阶段的分数为一组,比如第一个系列的数据(A)应该为[0,0,0],第二个系列的数据(B)应该为[7,4,6]…,因为我需要在vue中使用echarts,所以在method中和watch都要进行编写代码,以实现前端页面响应式渲染数据。
watch代码:
watch: {
bardata: {
immediate: true,
deep: true,
handler(nval, oval) {
let vm = this;
let xAxis = [];
let A= [];
let B= [];
let C= [];
nval.forEach((item) => {
xAxis.push(item.type);
A.push(item.A);
B.push(item.B);
C.push(item.C);
});
let series = [];
let name = ["A", "B", "C"];
let data = [A, B, C];
let color = ["#808080", "#c7f9b9", "#ff5454"];
nval.forEach((item, index) => {
series.push({
name: name[index],
type: "bar",
data: data[index],
barGap: 0,
itemStyle: {
normal: {
color: color[index],
},
},
smooth: true,
});
});
let param = {
xAxis,
series,
};
vm.$nextTick(function () {
vm.bar(param);
});
},
},
},
加工整理后的param数据:xAxis为x轴,series为图标所需要的series数据格式
{
"xAxis": [
"MYSQL",
"ORACLE",
"PGSQL"
],
"series": [
{
"name": "A",
"type": "bar",
"data": [ 0, 0,0],
"barGap": 0,
"itemStyle": {
"normal": {
"color": "#808080"
}
},
"smooth": true
},
{
"name": "B",
"type": "bar",
"data": [7, 4, 6],
"barGap": 0,
"itemStyle": {
"normal": {
"color": "#c7f9b9"
}
},
"smooth": true
},
{
"name": "C",
"type": "bar",
"data": [ 1, 5, 0],
"barGap": 0,
"itemStyle": {
"normal": {
"color": "#ff5454"
}
},
"smooth": true
}
]
}
method代码:
methods: {
bar(param) {
let vm = this;
let title = {
text: "健康得分概览",
textStyle: {
color: vm.styleChart.color,
fontWeight: 400,
},
x: "center",
textAlign: "left",
top: "10px",
};
let textStyle = {
color: vm.styleChart.color,
};
var myChart1 = vm.$echarts.init(document.getElementById("bar"));
myChart1.setOption({
title: title,
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
legend: {
x: "center",
y: "bottom",
textStyle: textStyle,
},
xAxis: {
name: "类型",
type: "category",
data: param.xAxis,
axisLabel: {
show: true,
align: "left",
interval: 0,
margin: 14,
},
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}个",
},
},
series: param.series,
});
},
},
最终页面渲染效果:
因A系列数据全部为0,所以没有柱状图显示,最后一组,A,C系列均为0,所以只显示一条柱状图
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbhhkf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01