父组件
<el-col :span="12" />
<div class="content-container">
<el-row>
<el-col :span="18">
<complexChart :mixture-data="MixtureData" />
</el-col>
<el-col :span="6">
<chartRef :pie-data="optionRight2" class="cgart" />
</el-col>
</el-row>
<script>
export default {
data() {
return {
MixtureData: {
title: '啦啦啦啦啦啦啦啦',
width: 100 + '%', // 柱状图盒子宽度
legend: {
// 图例属性
data: [
{
name: '任务',
// 图例引用图片。
icon: ''
},
{
name: '完成',
icon: ''
},
{
name: '完成进度',
icon: 'image://' + require('../../icons/svg/404.svg')
}
],
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>
子组件
<template>
<!-- //这是子组件 -->
<div class="mixture_wap">
<div id="mixtureId" class="mixture" />
</div>
</template>
<script>
const _c = { id: 1 }
const echarts = require('echarts')
export default {
props: {
MixtureData: {
type: Object
}
},
data() {
return {
myHisLevelChart: ''
}
},
created() {
},
mounted() {
const _this = this
var chartDom = document.getElementById('mixtureId')
this.myHisLevelChart = echarts.init(chartDom)
this.$nextTick(() => {
this.initChart()
})
window.addEventListener('resize', this.initChart, false)
},
beforeDestroy() {
window.removeEventListener('resize', this.initChart, false)
},
methods: {
initChart() {
const _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)
}
}
}
</script>
<style lang="scss" scoped>
.mixture_wap {
width: 100%;
.mixture {
width: 100%;
height: 255px;
}
}
</style>
vue echarts柱状统计图,多组数据对比
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1129.html
发布的文章
借用jQuery发送Http请求的实现(内附源码)
2024-02-15 14:02:07
jQuery ---- 插件
2024-02-15 14:02:06
Python入门自学进阶-Web框架——16、Django登录/注册
2024-02-15 14:02:03
html5 简单实用好看的滑动开关Jquery css带效果图(无bug)
2024-02-15 14:02:00
CSS-JavaScript-Jquery-Servlet
2024-02-15 14:02:00
Jquery锚点导航定位、css设置头部左侧固定,右侧内容滚动
2024-02-15 14:02:58
web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变
2024-02-15 14:02:58
原生JavaScript技术,jQuery实现下拉菜单
2024-02-15 14:02:52
在vue3项目中如何使用echarts
2024-02-15 14:02:45
BI可视化报表工具-SpringReport
2024-02-15 14:02:34
大家推荐的文章