This commit is contained in:
parent
c791769427
commit
4b0c60c97c
|
|
@ -84,8 +84,9 @@ const getOption = () => {
|
|||
{
|
||||
name: "在册数",
|
||||
type: "value",
|
||||
nameTextStyle: { // 设置Y轴名称的样式
|
||||
fontSize: 14 // 这里设置字体大小为20
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
|
|
@ -119,47 +120,73 @@ const getOption = () => {
|
|||
type: "bar",
|
||||
data: data.rs,
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255, 243, 119, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 242, 142, 0.20)",
|
||||
},
|
||||
],
|
||||
false),
|
||||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(142, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(142, 187, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false),
|
||||
];
|
||||
var colorList = [
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255, 243, 119, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 242, 142, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(142, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(142, 187, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
];
|
||||
|
||||
return colorList[params.dataIndex % colorList.length];
|
||||
},
|
||||
return colorList[params.dataIndex % colorList.length];
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -175,16 +175,16 @@ const getOption = () => {
|
|||
legend: [
|
||||
{
|
||||
orient: "vertical",
|
||||
right: "6%",
|
||||
top: "10%",
|
||||
itemWidth: 25, // 可以设置图例标记的宽度
|
||||
right: "1%",
|
||||
top: "16%",
|
||||
itemWidth: 20, // 可以设置图例标记的宽度
|
||||
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
itemGap: 19,
|
||||
itemStyle: {
|
||||
borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
borderWidth: 10, // 图例边框宽度
|
||||
borderRadius: 20,
|
||||
},
|
||||
itemGap: 20,
|
||||
// itemStyle: {
|
||||
// borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
// borderWidth: 10, // 图例边框宽度
|
||||
// borderRadius: 20,
|
||||
// },
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
|
|
@ -197,11 +197,16 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
data: data.list,
|
||||
formatter: (name) => {
|
||||
if (data.list.length) {
|
||||
const item = data.list.filter((item) => item.name === name)[0];
|
||||
return `{name|${name}}`;
|
||||
|
||||
//格式化图例文本
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
for (var i = 0, l = data.list.length; i < l; i++) {
|
||||
if (data.list[i].name == name) {
|
||||
target = data.list[i].value;
|
||||
}
|
||||
}
|
||||
return `${name}:${target} 人`;
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -221,8 +226,8 @@ const getOption = () => {
|
|||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "85%"],
|
||||
center: ["25%", "50%"],
|
||||
radius: ["15%", "80%"],
|
||||
center: ["20%", "50%"],
|
||||
label: {
|
||||
position: "inside",
|
||||
formatter(item) {
|
||||
|
|
@ -263,8 +268,8 @@ const getOption = () => {
|
|||
{
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["20%", "87%"],
|
||||
center: ["25%", "50%"],
|
||||
radius: ["15%", "82%"],
|
||||
center: ["20%", "50%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,17 +35,176 @@ const data = reactive({
|
|||
list2: [],
|
||||
year: [],
|
||||
option: {},
|
||||
bg:[]
|
||||
});
|
||||
|
||||
// const getOption = () => {
|
||||
// data.option = {
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||
// },
|
||||
// legend: {
|
||||
// top: "5%",
|
||||
// right: "11%",
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// color: "#ffffff",
|
||||
// },
|
||||
// },
|
||||
// grid: {
|
||||
// top: "25%",
|
||||
// left: "1%",
|
||||
// right: "10%",
|
||||
// bottom: "5%",
|
||||
// containLabel: true,
|
||||
// },
|
||||
// calculable: true,
|
||||
// xAxis: [
|
||||
// {
|
||||
// type: "category",
|
||||
// axisLabel: {
|
||||
// //坐标轴刻度标签的相关设置
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// data: data.year,
|
||||
// },
|
||||
// {
|
||||
// axisTick: false,
|
||||
// type: "category",
|
||||
// data: data.year,
|
||||
// axisLabel: {
|
||||
// show: false,
|
||||
// color: "#ffffff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: "value",
|
||||
// splitLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: "rgba(226, 226, 226, 0.3)",
|
||||
// width: 1,
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// //坐标轴刻度标签的相关设置
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "value",
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// splitLine: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// type: "solid",
|
||||
// color: "rgb(221, 242, 255,0.3)",
|
||||
// },
|
||||
// },
|
||||
// axisLine: {
|
||||
// show: false,
|
||||
// lineStyle: {
|
||||
// type: "dotted",
|
||||
// },
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false,
|
||||
// fontSize: 16,
|
||||
// color: "#DEF1FF",
|
||||
// fontFamily: "MicrosoftYaHei",
|
||||
// lineHeight: 19,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// name: "特困补助金额",
|
||||
// type: "bar",
|
||||
// data: data.list1,
|
||||
// barWidth: "18%",
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(162, 187, 255, 1)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(162, 187, 255, 0.20)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: "#ffffff",
|
||||
// position: "top",
|
||||
// formatter: function (data) {
|
||||
// return data.value;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "低保补助金额",
|
||||
// type: "bar",
|
||||
// data: data.list2,
|
||||
// barWidth: "18%",
|
||||
// itemStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(23, 237, 255, 1)",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(23, 237, 255, 0.20)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: "#ffffff",
|
||||
// position: "top",
|
||||
// formatter: function (data) {
|
||||
// return data.value;
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: "bar",
|
||||
// xAxisIndex: 1,
|
||||
// yAxisIndex: 1,
|
||||
// itemStyle: {
|
||||
// color: "rgba(221, 242, 255, 0.1)",
|
||||
// },
|
||||
// data: data.year.map(() => 100),
|
||||
// barWidth: 50,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// };
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
|
||||
padding: [20, 10, 20, 10],
|
||||
formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
|
||||
},
|
||||
legend: {
|
||||
data: ["特困补助金额", "低保补助金额"],
|
||||
top: "5%",
|
||||
right: "11%",
|
||||
right: "28%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
|
|
@ -55,41 +214,40 @@ const getOption = () => {
|
|||
top: "25%",
|
||||
left: "1%",
|
||||
right: "10%",
|
||||
bottom: "5%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
data: data.year,
|
||||
},
|
||||
{
|
||||
axisTick: false,
|
||||
type: "category",
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
// boundaryGap: false,
|
||||
data: data.year,
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "特困补助金额",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 2) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(226, 226, 226, 0.3)",
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
|
|
@ -100,95 +258,108 @@ const getOption = () => {
|
|||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgb(221, 242, 255,0.3)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 16,
|
||||
color: "#DEF1FF",
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
lineHeight: 19,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "特困补助金额",
|
||||
type: "bar",
|
||||
data: data.list1,
|
||||
barWidth: "18%",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(162, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(162, 187, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "低保补助金额",
|
||||
type: "value",
|
||||
min: 0, // 设置Y轴最小值
|
||||
max: function (value) {
|
||||
// 自定义Y轴最大值，确保数据点显示在顶部
|
||||
return Math.ceil(Math.max(value.max, value.max * 1.3) / 50) * 50;
|
||||
},
|
||||
nameTextStyle: {
|
||||
// 设置Y轴名称的样式
|
||||
fontSize: 14, // 这里设置字体大小为20
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
data: data.list2,
|
||||
barWidth: "18%",
|
||||
data: data.bg,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 0,
|
||||
name: "特困补助金额",
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
]),
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
position:'bottom',
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list1,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
name: "低保补助金额",
|
||||
type: "line",
|
||||
symbol: "emptyCircle",
|
||||
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 242, 255, 0.1)",
|
||||
borderColor: "#2468FF",
|
||||
borderWidth: 1,
|
||||
color: "#2468FF",
|
||||
},
|
||||
data: data.year.map(() => 100),
|
||||
barWidth: 50,
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
data: data.list2,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -207,6 +378,9 @@ onBeforeMount(() => {
|
|||
data.list1 = props.list1;
|
||||
data.list2 = props.list2;
|
||||
data.year = props.year;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
@ -214,4 +388,5 @@ onBeforeMount(() => {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -232,7 +232,7 @@ const getOption = () => {
|
|||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'rgba(0, 252, 255, 1)',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,11 +160,26 @@ const option = {
|
|||
data: data,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "上门服务次数",
|
||||
data: lineData,
|
||||
type: "line", //线状图
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
|
|
|
|||
|
|
@ -215,6 +215,14 @@ const getOption = () => {
|
|||
]),
|
||||
},
|
||||
},
|
||||
label:{
|
||||
show:true,
|
||||
position:'right',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue