<template>
<div class="barChart">
<div
:id="id"
:ref="id"
:style="{ height: height, width: width }"
v-if="flag"
></div>
<div v-else class="none-data-img">
<img src="../assets/img/data-none.png" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "barChart",
data() {
return {
flag: true,
};
},
/*
arr 数据
symbol 圆点 节点
symbolSize 节点大小
type 图标类型
lineColor 折线颜色
lineType 折线样式 ( 'dotted'虚线 'solid'实线 )
colorTop 0% 处的颜色 ( 推荐 rgba(34,146,199, 0) )
colorBottom 100% 处的颜色 ( 推荐 rgba(34,146,199, 0) )
*/
props: {
id: {
type: String,
default: "barChart",
},
// 宽
width: {
type: String,
default: "200px",
},
// 高
height: {
type: String,
default: "200px",
},
// 折线图数据
dataList: {
type: Array,
default: () => [],
},
// X轴数据
dataX: {
type: Array,
default: () => [],
},
// 柱状图顶点数字是否显示
labelShow: {
type: Boolean,
default: false,
},
// 柱状图顶点数字颜色
labelColor: {
type: String,
default: "#29abe2",
},
labelFontSize: {
type: String,
default: "14",
},
// 柱状图顶点数字显示位置
labelPosition: {
type: String,
default: "top",
},
// // 圆点 节点
// symbol: {
// type: String,
// default: "none",
// },
// 节点大小
// symbolSize: {
// type: Number,
// default: 1,
// },
// 是否平滑曲线
smooth: {
type: Boolean,
default: true,
},
//改变折线点的颜色
circleColor: {
type: Array,
default: () => [],
},
// 鼠标划入效果
tipShow: {
type: Boolean,
default: true,
},
legendShow: {
type: Boolean,
default: false,
},
legendTop: {
type: String,
default: "auto",
},
legendRight: {
type: String,
default: "auto",
},
legendBottom: {
type: String,
default: "auto",
},
legendLeft: {
type: String,
default: "auto",
},
legendData: {
type: Array,
default: () => [],
},
legendColor: {
type: String,
default: "#8493c3",
},
// 坐标轴两边留白
boundaryGap: {
type: Boolean,
default: false,
},
// 是否显示x轴
xlineShow: {
type: Boolean,
default: true,
},
// X轴颜色
xlineColor: {
type: String,
default: "#20325b",
},
// X轴宽度
xlineWidth: {
type: Number,
default: 1,
},
// 是否显示X轴所有的线
xSplitShow: {
type: Boolean,
default: false,
},
// 图表中X轴线样式
xSplitType: {
type: String,
default: "solid",
},
// 图表中X轴线颜色
xSplitColor: {
type: String,
default: "#20325b",
},
// 是否显示y轴
ylineShow: {
type: Boolean,
default: true,
},
// y轴颜色
ylineColor: {
type: String,
default: "#20325b",
},
// y轴颜宽度
ylineWidth: {
type: Number,
default: 1,
},
// 是否显示Y轴所有的线
ySplitShow: {
type: Boolean,
default: false,
},
// 图表中Y轴线样式
ySplitType: {
type: String,
default: "solid",
},
// 图表中Y轴线颜色
ySplitColor: {
type: String,
default: "#20325b",
},
// x轴字体颜色
xColor: {
type: String,
default: "#8493c3",
},
// y轴字体颜色
yColor: {
type: String,
default: "#8493c3",
},
// x轴文字旋转角度
rotate: {
type: Number,
default: 0,
},
// 柱状图颜色
optionColor: {
type: String,
default: "#29abe2",
},
barWidth: {
type: String,
default: "20px",
},
gridX: {
type: Number,
default: 35,
},
gridY: {
type: Number,
default: 20,
},
gridX2: {
type: Number,
default: 35,
},
gridY2: {
type: Number,
default: 30,
},
},
methods: {
drawChart() {
let myEchart = this.$echarts.init(this.$refs[this.id]);
// if (this.dataX.length == 0) {
// this.flag = false;
// myEchart.clear();
// return;
// }
this.flag = true;
let seriesList = this.dataList.map((ele, index) => {
return {
data: ele.arr,
name: ele.name,
type: ele.type,
symbol: ele.symbol,
symbolSize: ele.symbolSize,
smooth: this.smooth,
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
// 背景色
{
offset: 0,
color: ele.colorTop || "rgba(0,0,0, 0)", // 0% 处的颜色
},
{
offset: 1,
color: ele.colorBottom || "rgba(0,0,0, 0)",
},
],
global: false, // 缺省为 false
},
},
itemStyle: {
normal: {
label: {
show: this.labelShow, //开启显示
position: this.labelPosition, //在上方显示
textStyle: {
//数值样式
color: this.labelColor,
fontSize: this.labelFontSize,
},
},
color: this.circleColor[index],
lineStyle: {
color: ele.lineColor, //改变折线颜色
type: ele.lineType || "solid",
},
},
},
};
});
let option = {
color: this.optionColor,
barWidth: this.barWidth,
grid: {
x: this.gridX,
y: this.gridY,
x2: this.gridX2,
y2: this.gridY2,
},
tooltip: {
show: this.tipShow,
trigger: "axis",
},
legend: {
show: this.legendShow,
// icon: "roundRect",
top: this.legendTop,
right: this.legendRight,
bottom: this.legendBottom,
left: this.legendLeft,
// data: this.legendData
textStyle: {
color: this.legendColor,
},
},
xAxis: {
type: "category",
boundaryGap: this.boundaryGap,
data: this.dataX,
// x轴设置
axisLine: {
show: this.xlineShow,
lineStyle: {
color: this.xlineColor,
width: this.xlineWidth, //这里是为了突出显示加上的
},
},
splitLine: {
show: this.ySplitShow,
lineStyle: {
type: this.ySplitType,
color: this.ySplitColor,
},
},
axisLabel: {
color: this.xColor,
rotate: this.rotate,
// 让x轴文字方向为竖向
interval: 0,
// formatter: function(value) {
// return value.split('').join('\n')
// }
},
},
yAxis: {
type: "value",
axisLine: {
show: this.ylineShow,
lineStyle: {
color: this.ylineColor,
width: this.ylineWidth, //这里是为了突出显示加上的
},
},
axisLabel: {
color: this.yColor,
},
splitLine: {
show: this.xSplitShow,
lineStyle: {
type: this.xSplitType,
color: this.xSplitColor,
},
},
},
series: seriesList,
};
myEchart.setOption(option);
},
},
// 监听解决异步问题
watch: {
dataX: {
handler(newName, oldName) {
this.$nextTick(() => {
console.log("nextTick");
this.drawChart();
});
},
immediate: true,
},
},
mounted() {
// setTimeout(() => {
// this.drawChart();
// }, 1000);
},
};
</script>
<style lang="stylus" scoped>
.barChart {
// background: #090;
.none-data-img {
text-align: center;
img {
width: 150px;
}
}
}
</style>
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
