This commit is contained in:
duanxiaohai
parent
005ba272f3
commit
8821903bea
|
|
@ -20,11 +20,18 @@ const chart = ref(); // 创建DOM引用
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
list: [[], []],
|
list: [[], []],
|
||||||
list1: [],
|
list1: [],
|
||||||
|
list2: [],
|
||||||
|
Max: null,
|
||||||
option: {},
|
option: {},
|
||||||
initialLegendData: ["县镇", "农村"],
|
initialLegendData: ["县镇", "农村"],
|
||||||
initialLegendData1: ["副高级", "正高级", "未定级", "员级", "中级", "助理级"],
|
initialLegendData1: ["副高级", "正高级", "未定级", "员级", "中级", "助理级"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// data.list(...data.list)
|
||||||
|
// const newData2 = data.list.map((item) => parseInt(item));
|
||||||
|
// data.list1 = Math.max(...newData2) * 1.05;
|
||||||
|
// const newMaxNumber = Math.max(...newData2) * 1.05;
|
||||||
|
|
||||||
const getOption = () => {
|
const getOption = () => {
|
||||||
data.option = {
|
data.option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -50,6 +57,14 @@ const getOption = () => {
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
|
max: data.Max,
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(226, 226, 226, 0.3)",
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
//坐标轴刻度标签的相关设置
|
//坐标轴刻度标签的相关设置
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -61,9 +76,6 @@ const getOption = () => {
|
||||||
//y轴线的颜色以及宽度
|
//y轴线的颜色以及宽度
|
||||||
show: false, // 取消x轴线
|
show: false, // 取消x轴线
|
||||||
},
|
},
|
||||||
splitLine: {
|
|
||||||
show: false, //---grid 区域中的分隔线
|
|
||||||
},
|
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false, // 设置轴刻度不显示
|
show: false, // 设置轴刻度不显示
|
||||||
},
|
},
|
||||||
|
|
@ -82,6 +94,9 @@ const getOption = () => {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false, // 设置轴刻度不显示
|
show: false, // 设置轴刻度不显示
|
||||||
},
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false, //---grid 区域中的分隔线
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
//坐标轴刻度标签的相关设置
|
//坐标轴刻度标签的相关设置
|
||||||
textStyle: {
|
textStyle: {
|
||||||
|
|
@ -91,7 +106,6 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
data: data.initialLegendData1,
|
data: data.initialLegendData1,
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
@ -100,8 +114,8 @@ const getOption = () => {
|
||||||
barGap: "-50%",
|
barGap: "-50%",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
data: data.list[1],
|
data: data.list[1],
|
||||||
barWidth: "25%", //柱宽
|
barWidth: "40%", //柱宽
|
||||||
barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
|
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "inside",
|
position: "inside",
|
||||||
|
|
@ -111,16 +125,18 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
normal: {
|
||||||
{
|
color: function (params) {
|
||||||
offset: 0,
|
var colorList = [
|
||||||
color: "rgba(254, 255, 142, 1)",
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
},
|
{ offset: 0, color: "rgba(255, 234, 90, 0)" },
|
||||||
{
|
{ offset: 0.5, color: "rgba(255, 234, 90, 0.5)" },
|
||||||
offset: 1,
|
{ offset: 1, color: "rgba(255, 234, 90, 1)" },
|
||||||
color: "rgba(251, 255, 142, 0.20)",
|
|
||||||
},
|
|
||||||
]),
|
]),
|
||||||
|
];
|
||||||
|
return colorList[params.dataIndex % colorList.length];
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -129,8 +145,8 @@ const getOption = () => {
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barGap: "-50%",
|
barGap: "-50%",
|
||||||
data: data.list[0],
|
data: data.list[0],
|
||||||
barWidth: "25%", //柱宽
|
barWidth: "40%", //柱宽
|
||||||
barGap: 1 /*多个并排柱子设置柱子之间的间距*/,
|
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "inside",
|
position: "inside",
|
||||||
|
|
@ -140,16 +156,18 @@ const getOption = () => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
normal: {
|
||||||
{
|
color: function (params) {
|
||||||
offset: 0,
|
var colorList = [
|
||||||
color: "rgba(23, 255, 206, 1)",
|
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
},
|
{ offset: 0, color: "rgba(0, 255, 208,0)" },
|
||||||
{
|
{ offset: 0.5, color: "rgba(0, 255, 208,0.5)" },
|
||||||
offset: 1,
|
{ offset: 1, color: "rgba(0, 255, 208,1)" },
|
||||||
color: "rgba(23, 255, 202, 0.20)",
|
|
||||||
},
|
|
||||||
]),
|
]),
|
||||||
|
];
|
||||||
|
return colorList[params.dataIndex % colorList.length];
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -162,20 +180,42 @@ const setChart = () => {
|
||||||
myChart.setOption(data.option);
|
myChart.setOption(data.option);
|
||||||
};
|
};
|
||||||
const setChart1 = () => {
|
const setChart1 = () => {
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzfgj); //县镇复高级数量
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzzgj); //县镇正高级数量
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzwdj); //县镇未定级数量
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzyj); //县镇员级数量
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzzj); //县镇中级数量
|
||||||
data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量
|
// data.list[0].push(data.list1.xzjszcsl.xzzlj); //县镇助理级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量
|
// data.list[1].push(data.list1.ncjszcsl.ncfgj); //农村正高级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量
|
// data.list[1].push(data.list1.ncjszcsl.nczgj); //农村正高级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量
|
// data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村中级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量
|
// data.list[1].push(data.list1.ncjszcsl.nczlj); //农村助理级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量
|
// data.list[1].push(data.list1.ncjszcsl.ncyj); //农村员级数量
|
||||||
data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量
|
// data.list[1].push(data.list1.ncjszcsl.ncwdj); //农村未定级数量
|
||||||
|
|
||||||
console.log(data.list, "乡镇1");
|
const xzjszcsl = data.list1.xzjszcsl;
|
||||||
|
const ncjszcsl = data.list1.ncjszcsl;
|
||||||
|
const xzData = [
|
||||||
|
xzjszcsl.xzfgj,
|
||||||
|
xzjszcsl.xzzgj,
|
||||||
|
xzjszcsl.xzwdj,
|
||||||
|
xzjszcsl.xzyj,
|
||||||
|
xzjszcsl.xzzj,
|
||||||
|
xzjszcsl.xzzlj,
|
||||||
|
];
|
||||||
|
const ncData = [
|
||||||
|
ncjszcsl.ncfgj,
|
||||||
|
ncjszcsl.nczgj,
|
||||||
|
ncjszcsl.ncwdj,
|
||||||
|
ncjszcsl.nczlj,
|
||||||
|
ncjszcsl.ncyj,
|
||||||
|
ncjszcsl.ncwdj,
|
||||||
|
];
|
||||||
|
data.list[0].push(...xzData); // 县镇数据
|
||||||
|
data.list[1].push(...ncData); // 农村数据
|
||||||
|
data.list2 = [...data.list[0], ...data.list[1]];
|
||||||
|
let Max = Math.max(...data.list2);
|
||||||
|
data.Max = Math.ceil((Max * 1.2) / 100) * 100;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 使用生命钩子
|
// 使用生命钩子
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue