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