init() {
let data_X = ["1年以内", "1-3年", "3-7年", "7年以上"];
let data_Y = [21, 86, 50, 21];
this.crawPie(this.$refs.MainPopulation_chart, data_X, data_Y);
},
crawPie(dom, data_X, data_Y) {
let myChart =
this.$echarts.getInstanceByDom(dom) || this.$echarts.init(dom);
myChart.setOption({
grid: {
top: "15%",
bottom: "20%",
left: "3%",
right: "3%",
},
xAxis: {
data: data_X,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
interval: 0,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
color: "#ffffff",
fontWeight: 600,
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "顶部黑色点",
type: "pictorialBar",
symbol: "circle",
symbolRepeat: false,
barWidth: 14,
symbolSize: [4, 4],
symbolOffset: [5, 8],
z: 14,
itemStyle: {
normal: {
color: function (params) {
return "black";
},
},
},
symbolPosition: "end",
data: (function () {
let _data = data_Y.map(function (i) {
return i + 30;
});
return _data;
})(),
},
{
name: "顶部黄色点",
type: "pictorialBar",
symbol: "circle",
symbolRepeat: false,
barWidth: 14,
symbolSize: [12, 12],
symbolOffset: [5, 5],
z: 13,
itemStyle: {
normal: {
color: function (params) {
return "orange";
},
},
},
symbolPosition: "end",
data: (function () {
let _data = data_Y.map(function (i) {
return i + 30;
});
return _data;
})(),
},
{
name: "顶部上",
type: "pictorialBar",
symbol: "rect",
symbolRepeat: false,
barWidth: 14,
symbolOffset: [5, 5],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return "red";
},
opacity: 0.2,
},
},
symbolPosition: "end",
data: (function () {
let _data = data_Y.map(function (i) {
return i + 30;
});
return _data;
})(),
},
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [26, 10],
symbolOffset: [0, -5],
z: 18,
itemStyle: {
normal: {
color: function (params) {
return "#42DDFC";
},
},
},
label: {
show: true,
position: "top",
fontSize: 12,
color: "#FFFF00",
fontFamily: "tenxu",
formatter: "{c}%",
},
symbolPosition: "end",
data: data_Y,
},
{
name: "柱底部",
type: "pictorialBar",
symbolSize: [26, 10],
symbolOffset: [0, 5],
z: 17,
itemStyle: {
normal: {
color: function (params) {
return "#42DDFC";
},
},
},
data: data_Y,
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [40, 15],
symbolOffset: [0, 13],
z: 11,
itemStyle: {
normal: {
color: function (params) {
return "#07344D";
},
},
},
data: data_Y,
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [42, 20],
symbolOffset: [0, 15],
z: 10,
itemStyle: {
normal: {
color: function (params) {
return "#40ECFE";
},
},
},
data: data_Y,
},
{
type: "bar",
itemStyle: {
normal: {
// 中间柱子渐变色
color: function (params) {
return {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 1,
color: "#149ECD",
},
{
offset: 0,
color: "#36E8F2",
},
],
global: false,
};
},
},
},
z: 16,
silent: true,
barWidth: 26,
barGap: "-100%", // Make series be overlap
data: data_Y,
},
],
});
window.addEventListener("resize", function () {
myChart.resize();
});
},
浅浅记录一下
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
