接上一篇文章,接下来写的是有关于柱状图+折线图的图表,此图表分为左右两个坐标轴:请看下图
相关配置请看第一篇文章:echarts之饼图配置
以及echarts官网链接:echarts官网
废话不多说请看代码:
这是子组件:
<template>
//这是子组件
<div class="mixture_wap">
<div class="mixture" id="mixtureId"></div>
</div>
</template>
<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
props: {
MixtureData: {
type: Object,
},
},
data() {
return {
myHisLevelChart: "",
};
},
created() {
},
mounted() {
let _this = this;
var chartDom = document.getElementById("mixtureId");
this.myHisLevelChart = echarts.init(chartDom);
this.$nextTick(()=>{
this.initChart();
})
window.addEventListener("resize", this.initChart,false);
},
methods: {
initChart() {
let _this = this;
this.myHisLevelChart.resize();
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow", //鼠标悬停显示样式
shadowStyle: {
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 2,
},
},
formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%", //展示百分比 五条折线
},
legend: this.MixtureData.legend, //标记属性
grid: this.MixtureData.grid, //绘图区调整
yAxis: [
{
type: "value",
min: 0,
max: 400000,
interval: 100000,
},
{
type: "value",
min: 0,
max: 125,
interval: 25,
axisLabel: {
formatter: "{value} %",
},
},
],
xAxis: {
//X轴显示数值
type: this.MixtureData.xAxis.type,
data: this.MixtureData.xAxis.dataList,
axisLabel: {
//坐标轴文字显示样式
interval: 0,
lineHeight: this.MixtureData.xAxis.axisLabel.lineHeight,
rotate: this.MixtureData.xAxis.axisLabel.rotate,
formatter: function (value) {
var str = "";
var num = _this.MixtureData.xAxis.axisLabel.fontNum; //每行显示字数
var valLength = value.length; //该项Y轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
},
},
},
series: this.MixtureData.series,
};
this.myHisLevelChart.setOption(option, true);
},
},
beforeDestroy(){
window.removeEventListener('resize',this.initChart,false)
}
};
</script>
<style lang="scss" scoped>
.mixture_wap {
width: 100%;
.mixture {
width: 100%;
height: 220px;
}
}
</style>
这是父组件:
<template>
<div class="wrap">
<div class="income_mid mt16">
<div class="pub_title lineH1 flexa pt15">
<p class="side"></p>
<p class="fb">啦啦啦啦啦啦啦啦</p>
</div>
<Mixture :MixtureData="MixtureData" />
</div>
</div>
</template>
<script>
import Mixture from "./mixture";
export default {
name: "wrap",
components: {
Mixture,
},
data() {
return {
// 折柱混合
MixtureData: {
title: "啦啦啦啦啦啦啦啦",
width: 100 + "%", //柱状图盒子宽度
legend: {
//图例属性
data: [
{
name: "任务",
// 图例引用图片。
icon: "image://" + require("../../assets/img/icozn2.png"),
},
{
name: "完成",
// 图例引用图片。
icon: "image://" + require("../../assets/img/icozn1.png"),
},
{
name: "完成进度",
// 图例引用图片。
icon: "image://" + require("../../assets/img/icozn.png"),
},
],
orient: "horizontal", //标记排列显示
top: 15, //标记位置
left: 1 + "%", //标记位置
// icon: "roundRect",
itemWidth: 24,
itemHeight: 8,
//itemGap:5,//图例间距
//padding:5,//每个图例padding
//textStyle:{//图例文字样式设置
// lineHeight:5,
//}
},
grid: {
//绘图区调整
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
//X轴显示分类
type: "category",
dataList: [
"北山街道",
"西溪街道",
"灵隐街道",
"翠苑街道",
"文新街道",
"古荡街道",
"转塘街道",
"留下街道",
"蒋村街道",
"三墩镇",
"双浦镇",
"云栖小镇",
"紫金港科技城",
],
axisLabel: {
//坐标轴文字显示样式
lineHeight: 18, //字体行高
fontNum: 8, //每行显示字数
rotate: 20, //文字旋转角度,0不旋转
align: "right",
},
},
series: [
//柱状图数据
{
name: "任务",
type: "bar",
data: [
52000,
86500,
86500,
125000,
63000,
342500,
203000,
203000,
87500,
100000,
45000,
50500,
100000,
],
label: {
show: false,
position: "top", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
itemStyle: {
color: "#1492FF", //柱状图颜色
},
},
{
name: "完成",
type: "bar",
data: [
10493,
18631,
18311,
34883,
16442,
154657,
33687,
61340,
16333,
48180,
10458,
8465,
18300,
],
label: {
show: false,
position: "top", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
itemStyle: {
color: "#09C592",
},
},
{
name: "完成进度",
type: "line",
data: [
20.18,
21.54,
21.17,
27.91,
26.1,
45.16,
16.59,
30.22,
18.67,
48.18,
23.24,
16.76,
18.3,
],
yAxisIndex: 1, //双Y轴,选择折线图对应某个轴
label: {
show: true,
position: "top", //数值在右边显示
formatter: "{c} %",
},
labelLine: { show: false }, //是否显示线条
itemStyle: {
color: "#FF9314",
},
},
],
}
};
},
};
</script>
<style lang="scss" scoped>
.pub_title {
color: #333;
font-size: 16px;
height: 22px;
margin-top: 15px;
.side {
width: 4px;
height: 16px;
line-height: 16px;
background: #1d96ff;
border-radius: 2px;
margin-right: 16px;
}
}
.income_top {
margin-top: 16px;
.income_top_left,
.income_top_right {
width: calc(50% - 8px);
height: 294px;
border-radius: 4px;
flex: (0, 0, calc(50% - 8px));
background-color: #fff;
}
}
.income_bottom,
.income_mid {
background-color: #fff;
}
</style>
下一篇着重介绍水平柱状图以及旋转90度的柱状图