-
效果图
-
vue柱形图+折线图组件
<template>
<div ref="two"></div>
</template>
<script>
import echarts from "echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/line";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/map";
import "echarts/lib/chart/effectScatter";
import "echarts/lib/chart/scatter";
import "echarts/lib/chart/lines";
import "echarts/lib/chart/pictorialBar";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/geo";
export default {
props: {
propsData: { type: Array, default: () => [] },
},
data() {
return {};
},
mounted() {
this.two();
},
methods: {
two() {
const two = echarts.init(this.$refs.two);
const {
xname,
legendName,
serisesData,
title,
colorList,
barGap,
} = this.propsData;
const serises = [];
for (let i = 0; i < legendName.length; i++) {
serises.push({
name: legendName[i],
type: "bar",
data: serisesData[i],
barWidth : 18,//柱图宽度
barGap: barGap,
itemStyle: {
normal: {
color: colorList[i],
barBorderRadius: [30, 30, 0, 0],
},
},
});
}
const option = {
backgroundColor: "#fff",
title: {
text: title,
x: "25",
y: "10",
textStyle: {
fontWeight: "700",
fontSize: 20,
color: "#444",
},
},
grid: {
left: "3%",
right: "3%",
bottom: "23%",
top: "15%",
containLabel: true,
},
legend: {
bottom: 15,
textStyle: {
color: "#666",
padding: [2, 0, 0, 0],
},
itemGap: 30,
itemWidth: 10,
itemHeight: 20,
data: legendName,
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
backgroundColor: "#fff",
borderColor: "#ccc",
borderWidth: 1,
padding: 10,
formatter: function (val) {
var temp = val.map((item, index) => {
return `<span style="display:inline-block; width:10px;height:10px;background:
${val[index].color};margin:0 10px 0 0; border-radius:3px"> </span>
${val[index].seriesName}: ${val[index].data}人<br/>`;
});
return `${
val[0].axisValueLabel
}<br/>${temp.toString().replace(/[,]/g, "")}`;
},
textStyle: {
fontSize: 14,
color: "#666",
},
},
toolbox: {
show: true,
top: 10,
right: 25,
itemSize: 37,
itemGap:0,
feature: {
magicType: {
type: [ "bar","line"],
icon: {
bar:
"image://data:image/png;base64,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",
line:
"image://data:image/png;base64,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",
},
},
saveAsImage: {
icon:
"image://data:image/png;base64,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",
},
},
},
xAxis: [
{
type: "category",
data: xname,
axisLabel: {
interval:0,
// margin: 20,
color: "#666",
textStyle: {
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: "#666",
},
},
axisTick: {
show: true,
inside: true,
},
},
],
yAxis: [
{
min: 0,
// max: 100,
axisLabel: {
// formatter: '{value}%',
color: "#666",
textStyle: {
fontSize: 14,
},
},
axisLine: {
lineStyle: {
color: "#666",
},
},
axisTick: {
inside: true,
},
splitLine: {
show: false,
},
},
],
dataZoom: [
{
show: true,
height: 30,
xAxisIndex: [0],
bottom: 60,
start: 0,
end: 100,
handleStyle: {
color: "#5B3AAE",
},
},
{
type: "inside",
show: true,
height: 15,
},
],
series: serises,
};
two.setOption(option,true);
window.addEventListener("resize", function () {
two.resize();
});
},
}
};
</script>
<style>
</style>
- 页面引用
<rich-bar-charts :key="richBarCharts" style="height: 500px;" :propsData="touristStock"></rich-bar-charts>
import RichBarCharts from "../components/echarts/richBarCharts";
export default {
components: { RichBarCharts},
data () {
return {
richBarCharts:1,
touristStock:{
xname:['景点1','景点2','景点3','景点4','景点5','景点6','景点7','景点8'],
legendName:['进园人数','出园人数'],
serisesData:[[520,520,205,200,520,764,520,550],[520,764,520,550,520,520,205,200]],
title:'进出园人数分析',
colorList:['#01ce8d','#ffa922'],
barGap:1
},//进出园人数统计图分析
}
}
}