准备数据
// xianZhongFallList:[13.47, 0.11, 0.02, 0.42, 0.63, 0.59, -0.47, 0.39]
// xianZhongFallXxais:['行业增速', '家用交强件数影响', '家用交强件均影响', '家用商业件数影响', '家用商业件均影响', '商用件数影响', '商用件均影响', '结构影响', '主体增速']
主要在于先处理数据,
pageInit1() {
var echarts = this.$echarts;
var myChart = echarts.init(document.getElementById("charts3"));
// 清空画布
let dw1 = this.dw
let _this = this
myChart.clear();
var dy = this.xianZhongFallList.map(item=>{
return Number(item)
});
var zt = [];
var label = [];
var tot = dy[0];
for (var i = 0; i < dy.length; i++) {
var obj = [];
if (i === 0) {
if (dy[0] >= 0) {
label.push({
value: parseFloat(dy[i]).toFixed(2),
coord: [i, dy[i]],
});
} else {
label.push({ value: parseFloat(dy[i]).toFixed(2), coord: [i, 0] });
}
obj.push(0);
obj.push(dy[i]);
obj.push(dy[i]);
obj.push(dy[i]);
zt.push(obj);
} else {
var start = zt[i - 1][1];
var val = parseFloat(dy[i]);
var end = start + val;
tot = tot + dy[i];
if (dy[i] < 0) {
let tot1;
tot1 = tot - dy[i];
label.push({
value: parseFloat(dy[i]).toFixed(2),
coord: [i, tot1],
});
} else {
label.push({
value: parseFloat(dy[i]).toFixed(2),
coord: [i, tot],
});
}
obj.push(start);
obj.push(end);
obj.push(end);
obj.push(end);
zt.push(obj);
}
}
let option = {
grid: {
left: "3%",
right: "4%",
// bottom: "3%",
containLabel: true,
},
title: {
show: this.xianZhongFallList.length == 0, // 没数据才显示
textStyle: {
color: "grey",
fontSize: 20
},
text: "暂无数据",
left: "center",
top: "center"
},
dataZoom: [
{
show: false, //是否显示下方滚动条
realtime: true,
start: 0, //显示数据开始位置
end: 100, //显示数据结束位置
},
{
type: "inside",
realtime: true,
start: 0,
end: 100,
},
],
xAxis: {
data: this.xianZhongFallXxais,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
margin: 20,
formatter: function (value) {
var ret = ""; //拼接加\n返回的类目项
var maxLength;
if (value.length === 2 && _this.chartsid === "qblj") {
maxLength = 2; //每项显示文字个数
} else if (value.length === 8 && _this.chartsid === "qblj") {
maxLength = 4;
} else if (value.length == 6 && _this.chartsid === "qblj") {
var str1 = value.slice(0, 2) + "\n" + value.slice(2);
}
var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1) {
//如果类目项的文字大于5,
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else if (value.length === 6 && _this.chartsid === "qblj") {
return str1;
} else {
return value;
}
},
},
nameGap: 30,
},
yAxis: {
type: "value",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
formatter: dw1==='1'?"{value}万元":"{value}%"
},
splitLine: {
lineStyle: {
type: "dashed",
},
},
},
series: [
{
type: "candlestick",
//开始值、结束值、最大值、最小值
barWidth: 15,
data: zt.map((item, index) => {
return {
value: item,
itemStyle: {
color: "#438f75",
color0:"#cc2c3b",
borderWidth: 0,
},
};
}),
markPoint: {
symbol: "rect",
//图形上面的小头隐藏
symbolSize: 0.000000000000001,
label: {
show: true,
color: "#000",
position: "top",
fontSize: 10,
formatter: function (res) {
if (Math.floor(res.data.value) === res.data.value) {
return res.data.value + ".0";
} else {
return res.data.value;
}
},
},
data: label,
},
emphasis: {
itemStyle: {
// color:'yellow',
// color0:'#509c83',
borderWidth: 0,
},
},
},
],
};
myChart.setOption(option, true);
common.resizeEcharts(this.charts3, myChart);
},