本文将为您描述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