本文将为您描述echart 人头,具体实现方法:
import { mapState } from "vuex";
import echarts from "@/utils/initEcharts";
import deepMerge from "@/utils/deepMerge";
export default {
name: "spiritChart",
props: {
className: {
type: String,
default: "spiritChartBox"
},
id: {
type: String,
default: "spiritChart"
},
options: {
type: Object,
default: function() {
return {};
}
}
},
data() {
return {
chart: null
};
},
watch: {
options() {
this.setOption();
},
clientWidth() {
this.setOption();
}
},
mounted() {
const self = this;
self.initChart();
},
computed: {
...mapState({
clientWidth: state => state.init.clientWidth
})
},
methods: {
initChart() {
const self = this;
self.chart = echarts.init(document.getElementById(self.id));
window.addEventListener("resize", () => {
self.chart.resize();
});
self.setOption();
},
setOption() {
const self = this;
const { options, clientWidth } = self;
const maxData = 100;
const spirit =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAA+CAYAAADeQLDtAAAACXBIWXMAAAsSAAALEgHS3X78AAABpElEQVRYhe2YQU6EMBSGf4n7coTxBHoAFrhg7dxAvcEcAW/g3ABP4Ljuxkk4gNwAb1BOgHljIQ22fR2GMcb0Twjh9ZWvpS389KLve3Aq6u4GQAngzkhtKCYzsePqs5Ci7tYAXj0pjzIT1WxIUXcpgBaAYBp7KzPx7ipMmMoPAYAhzykOkgcA2DwOkgZCvHkc5CMQ4s3jIN5ZE5rnhchMUAu3DKDhpjDXEwJtADw5it9CJkfQisf3mlnpG9JZAdjJTLQhdYMhp+jSvCjqLj9ibfjUmuM09qSoOwreL9gBeoHmMhMq0YByYQDpepjah54UdacC31FzdJXocTgXgLRm18kCSn8Dwq/4c0Kamfez1nNBNjMh1nr/f0wiJEIiJEL+OkRZ4kHO0KHPSVgl2lS/GMFtqP10qDTC9BGrTHNHrkVpKF3P8a+Hf0ftm1fDf+RoU30/ltMbAXjW5s0q/STGp3H07NKNsY2jU3HFR0iEREiEREiEnAIZ7I7r82uN+yC2vUcyEObZ1H5wOlNx2+i0c00HtbAyN/+1haIysj8Up/KfPQHwBdyuiCoNTDAkAAAAAElFTkSuQmCC";
self.chart.setOption({
title: {
text: "景区饱和度",
x: "center",
y: "15%",
textStyle: {
color: "#fff",
fontSize: 24,
fontWeight: 600
}
},
tooltip: { show: false },
xAxis: {
max: maxData,
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
yAxis: {
data: options.yAxisData || [],
inverse: true,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
formatter: val => {
const strArr = val.split("_");
return `{a|${strArr[0]}}n{b|${strArr[1]}}`;
},
rich: {
a: {
color: "#fff",
fontSize: 12,
lineHeight: 20
},
b: {
color: "#fbee21",
fontSize: 16
}
}
}
},
grid: { top: "25%", height: "60%", width: "43%", right: "10%" },
series: [
{
type: "pictorialBar",
symbol: spirit,
symbolRepeat: "fixed",
symbolMargin: "15%",
symbolClip: true,
symbolSize: [15, 30],
symbolBoundingData: maxData,
data: options.seriesData || [],
z: 10
},
{
type: "pictorialBar",
itemStyle: {
normal: {
opacity: 0.2
}
},
animationDuration: 0,
symbolRepeat: "fixed",
symbolMargin: "15%",
symbol: spirit,
symbolSize: [15, 30],
symbolBoundingData: maxData,
data: options.seriesData || [],
z: 5
}
]
});
}
}
};
.spiritChartBox {
width: 100%;
height: 100%;
}
echart 人头就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.
本文地址:https://c.lanmit.com/Webqianduan/htmlyucss/22727.html