This commit is contained in:
姚宇浩 2024-09-26 09:46:42 +08:00
parent c3a7bcb1d0
commit ded66c73e0
21 changed files with 2 additions and 2857 deletions

View File

@ -1,150 +0,0 @@
<template>
<div ref="chart" style="width:100%;height:300px;"></div>
</template>
<script setup >
import {onMounted, reactive, ref} from "vue";
// echarts
import * as echarts from 'echarts'
const chart =ref(); // DOM
var plantCap = [{
name: '中国工程院 \n\n 院士'
}, {
name: '计算机应用 \n\n 专家'
}, {
name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授'
}, {
name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
}, {
name: '浙江大学信息 \n\n 学部主任'
}, {
name: '博士生导师'
}];
var datalist = [{
offset: [10, 73],
symbolSize: 90,
opacity: .95,
color: '#C58F5A'
}, {
offset: [40, 63],
symbolSize: 90,
opacity: .88,
color: '#076097'
}, {
offset: [80, 73],
symbolSize: 130,
opacity: .84,
color: '#BF74CF'
}, {
offset: [20, 23],
symbolSize: 140,
opacity: .84,
color: '#2D90ED'
}, {
offset: [60, 23],
symbolSize: 95,
opacity: .84,
color: '#079773'
}, {
offset: [90, 33],
symbolSize: 80,
opacity: .84,
color: '#C89D4A'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
let option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
color: '#00acea'
}
},
data: datas
}]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value)
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
window.addEventListener('resize',()=>{
myChart.resize()
})
})
</script>
<style scoped>
</style>

View File

@ -1,150 +0,0 @@
<template>
<div ref="chart" style="width:100%;height:300px;"></div>
</template>
<script setup >
import {onMounted, reactive, ref} from "vue";
// echarts
import * as echarts from 'echarts'
const chart =ref(); // DOM
var plantCap = [{
name: '中国工程院 \n\n 院士'
}, {
name: '计算机应用 \n\n 专家'
}, {
name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授'
}, {
name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
}, {
name: '浙江大学信息 \n\n 学部主任'
}, {
name: '博士生导师'
}];
var datalist = [{
offset: [10, 73],
symbolSize: 90,
opacity: .95,
color: '#C58F5A'
}, {
offset: [40, 63],
symbolSize: 90,
opacity: .88,
color: '#076097'
}, {
offset: [80, 73],
symbolSize: 130,
opacity: .84,
color: '#BF74CF'
}, {
offset: [20, 23],
symbolSize: 140,
opacity: .84,
color: '#2D90ED'
}, {
offset: [60, 23],
symbolSize: 95,
opacity: .84,
color: '#079773'
}, {
offset: [90, 33],
symbolSize: 80,
opacity: .84,
color: '#C89D4A'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
let option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
color: '#00acea'
}
},
data: datas
}]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value)
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
window.addEventListener('resize',()=>{
myChart.resize()
})
})
</script>
<style scoped>
</style>

View File

@ -1,219 +0,0 @@
<template>
<div ref="chart" style="width: 50%; height: 160px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
import "echarts-liquidfill";
const chart = ref(); // DOM
const liq = reactive({ //chart
value: 0.18,
})
const Pie = () => {
let dataArr = [];
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 50,
itemStyle: {
normal: {
color: '#00AFFF',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)',
},
},
});
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)',
},
},
});
}
}
return dataArr;
}
let option = {
series: [
{
value: liq.value, // formatter
type: 'liquidFill',
radius: '70%', //
center: ['50%', '50%'],
data: [
liq.value,
{
value: liq.value,
direction: 'left', //
},
], // data
backgroundStyle: {
borderWidth: 1,
color: 'rgba(62, 208, 255, 1)', //
},
amplitude: '6 %', //
//
// color: ['#0286ea', 'l#0b99ff'], //
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 1,
color: '#6CDEFC',
},
{
offset: 0,
color: '#429BF7',
},
],
globalCoord: false,
},
],
label: {
normal: {
// formatter: 0.87 * 100 + '\n%',
// formatter: 0.6 * 100 + '{d|%}',
formatter: function(params){
return params.value * 100 + "%";
},
rich: {
d: {
fontSize: 20,
},
},
textStyle: {
fontSize: 20,
color: '#fff',
},
},
},
outline: {
show: false,
},
},
{
type: 'pie',
z: 1,
center: ['50%', '50%'],
radius: ['72%', '73.5%'], //
hoverAnimation: false,
data: [
{
name: '',
value: 500,
labelLine: {
show: false,
},
itemStyle: {
color: '#00AFFF',
},
emphasis: {
labelLine: {
show: false,
},
itemStyle: {
color: '#00AFFF',
},
},
},
],
},
{
//
type: 'pie',
z: 1,
zlevel: -1,
radius: ['70%', '90.5%'],
center: ['50%', '50%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 20,
color: 'rgba(224,242,255,1)',
},
},
label: {
show: false,
},
data: [100],
},
// {
// //
// type: 'pie',
// z: 1,
// zlevel: -2,
// radius: ['70%', '100%'],
// center: ['50%', '50%'],
// hoverAnimation: false,
// clockWise: false,
// itemStyle: {
// normal: {
// borderWidth: 20,
// color: 'rgba(224,242,255,.4)',
// },
// },
// label: {
// show: false,
// },
// data: [100],
// },
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['78%', '80%'],
z: 1,
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false,
},
},
data: Pie(),
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
window.addEventListener("resize", () => {
myChart.resize();
});
});
</script>
<style scoped></style>

View File

@ -1,219 +0,0 @@
<template>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data = [200, 120, 150, 110, 70];
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(17, 193, 255, 1)",
},
{
offset: 0.5,
color: "rgba(17, 193, 255, 0.5)",
},
{
offset: 1,
color: "rgba(17, 193, 255, 0.20)",
},
],
},
];
const option = {
tooltip: {
trigger: "axis",
formatter: "{b0}:{c0}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //
},
},
},
legend: {
// data: ["", ""],
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "8%",
left: "5%",
right: "3%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
calculable: true,
// color: "rgba(0, 252, 255, 1)",
color,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, //
},
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
{
type: "category",
show: false,
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
],
yAxis: [
{
type: "value",
scale: true,
// name: "/",
// max: data.length,
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
fontSize: 16,
lineHeight: 19,
},
},
],
series: [
{
z: 1,
// name: "",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .3)" },
{ offset: 1, color: "rgba(47, 168, 215, .5)" },
],
},
},
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
},
//
{
xAxisIndex: 1,
yAxisIndex: 1,
showBackground: true,
itemStyle: {
normal: {
color: "rgba(180, 180, 180, 0)", //
},
},
// data: data.map(() => max),
data: data.map(() => 100),
barWidth: 40, //
type: "bar",
},
//
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(47, 168, 215, 1)",
},
},
],
};
// 使
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);
});
</script>
<style scoped></style>

View File

@ -1,201 +0,0 @@
<template>
<div ref="chart" style="width: 100%; height: 210px"></div>
</template>
<script setup>
import { onBeforeMount, onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
month: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
month: [],
option: {},
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a1}:{c1}",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, //
},
data: data.month,
},
{
axisTick: false,
type: "category",
data: data.month,
axisLabel: {
show: false,
},
},
],
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.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
lineHeight: 19,
},
},
],
series: [
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list,
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [10, 10],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 136, 255, 1)",
},
},
{
z: 1,
name: "线索",
type: "bar",
barGap: "0%",
data: data.list,
barWidth: "25%",
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 136, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 136, 255, 0.20)",
},
]),
},
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 136, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 136, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 136, 255, .3)" },
{ offset: 1, color: "rgba(23, 136, 255, .5)" },
],
},
},
},
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
fontSize: 16,
},
data: data.month.map(() => 100),
barWidth: 30,
},
],
};
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.month = props.month;
// console.log(data.list, props.month, "");
getOption();
setChart();
}, 600);
});
</script>
<style scoped></style>

View File

@ -1,164 +0,0 @@
<template>
<div ref="chart" style="width:100%; height: 210px"></div>
</template>
<script setup >
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
month: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
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,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "线索",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#0069FF ",
borderWidth: 1,
color: "#0069FF ",
},
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: "rgba(0, 105, 255, 0.50)",
},
{
offset: 1,
color: "rgba(0, 105, 255, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: data.list,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.month;
// console.log(data.list,props.month,'');
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -1,164 +0,0 @@
<template>
<div ref="chart" style="width: 100%; height: 210px"></div>
</template>
<script setup >
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
month: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
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,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "线索",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: "rgba(0, 252, 255, 0.50)",
},
{
offset: 1,
color: "rgba(0, 252, 255, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: data.list,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.month;
// console.log(data.list,props.month,'');
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -1,301 +0,0 @@
<template>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
watch,
defineProps,
onBeforeMount,
} from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
active: {
type: String,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
option: {},
value: 18,
namea: "",
});
// const datas = {
// value: 18,
// };
var colors = ["#00FFFB", "#FF9E2C", "#F74951", "#D7FF00", "#0050FF", "#00FB7D"];
const getOption = () => {
data.option = {
color: colors,
tooltip: {
trigger: "item",
// formatter: "{a} <br/>{b} : {c} ({d}%)",
},
series: [
//
{
type: "pie",
center: ["50%", "50%"],
radius: ["60%", "80%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: "rgba(14, 59, 123, 0.60)",
fontSize: 16,
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
labelLayout: {
hideOverlap: false, //
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: data.namea,
type: "pie",
radius: ["30%", "60%"],
center: ["50%", "50%"],
roundCap: true,
clockWise: true,
startAngle: 180,
minShowLabelAngle: 30,
minAngle: 50, //
startAngle: 100, //
// hoverAnimation: false,
label: {
// {b}{c}
//{a|}rich a
//{hr|}
formatter: "{hr|}{a|{b} {c}}\n\n",
color: "#ffffff", //线
fontSize: 16,
borderWidth: 10,
borderRadius: 4,
padding: [90, -60],
rich: {
//
hr: {
//auto
backgroundColor: "auto",
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 13, 0, -22],
},
a: {
padding: [-16, 10, -20, 20],
},
},
textStyle: {
// color: "white", //
color: "#ffffff",
fontSize: 16, //
},
},
labelLine: {
show: true, //线
normal: {
length: 20, // 线
length2: 40,
lineStyle: {
color: "white", // 线
},
},
},
labelLayout: {
hideOverlap: false, //
},
data: data.list,
},
],
};
};
// let option = {
// legend: {
// bottom: 10,
// left: "center",
// data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
// },
// tooltip: {
// trigger: "item",
// },
// series: [
// //
// {
// type: "pie",
// center: ["50%", "50%"],
// radius: ["50%", "82%"],
// hoverAnimation: false,
// clockWise: false,
// itemStyle: {
// normal: {
// borderWidth: 1,
// borderColor: "rgba(193, 229, 255, .1)",
// color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
// {
// offset: 1,
// color: "rgba(127, 242, 255, .2)",
// },
// {
// offset: 0,
// color: "rgba(109, 195, 255, 0)",
// },
// ]),
// },
// },
// tooltip: {
// show: false,
// },
// label: {
// show: false,
// },
// data: [100],
// },
// /**/
// {
// name: "",
// type: "pie",
// roundCap: true,
// clockWise: true,
// startAngle: 180,
// labelLine: {
// show: true, //线
// // length: 30,
// lineStyle: {
// width: 1,
// type: "solid",
// color: "#fffdef",
// },
// },
// label: {
// // {b}{c}
// //{a|}rich a
// //{hr|}
// formatter: "{a|{b}{c}}\n{hr|}",
// //线
// color: "#fffdef",
// rich: {
// //
// hr: {
// //auto
// backgroundColor: "auto",
// borderRadius: 3,
// width: 3,
// height: 3,
// padding: [3, 3, 0, -12],
// },
// a: {
// padding: [-12, 10, -20, 15],
// },
// },
// },
// radius: ["30%", "60%"],
// center: ["50%", "50%"],
// hoverAnimation: false,
// data: [
// { value: 44, name: "" },
// { value: 44, name: "" },
// { value: 44, name: "" },
// { value: 44, name: "" },
// { value: 41, name: "" },
// { value: 30, name: "" },
// ],
// },
// // {
// // name: "",
// // type: "pie",
// // clockWise: false, //
// // hoverAnimation: false, //
// // center: ["50%", "50%"],
// // radius: ["75%", "75%"],
// // label: {
// // normal: {
// // show: false,
// // },
// // },
// // data: [
// // {
// // value: 9,
// // name: "",
// // itemStyle: {
// // normal: {
// // borderWidth: 2,
// // borderColor: "#61bad3",
// // },
// // },
// // },
// // ],
// // },
// ],
// };
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
watch(
() => props.list,
(newVal, oldVal) => {
data.list = newVal;
getOption();
setChart();
console.log("学校", newVal, oldVal);
}
);
watch(
() => props.active,
(newVal, oldVal) => {
data.namea = newVal;
getOption();
setChart();
}
);
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.namea = props.active;
getOption();
setChart();
}, 600);
// var myChart = echarts.init(chart.value);
// myChart.setOption(option);
});
</script>
<style scoped></style>

View File

@ -1,149 +0,0 @@
<template>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const datas = {
value: 18,
text: "留 守 儿 童"
}
let option = {
series: [
//
{
type: "pie",
center: ["60%", "55%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['60%', '55%'],
data: [
{
value: datas.value,
label: {
normal: {
formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgba(0, 255, 250, 0.29)'
},
{
offset: 0.5,
color: 'rgba(0, 255, 250, 0.8)'
}, {
offset: 1,
color: 'rgba(0, 255, 250, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: '#095b9b', //
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#095b9b' //
}
}
}]
}
]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -1,145 +0,0 @@
<template>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const datas = {
value: 38,
text: "单 亲 家 庭"
}
let option = {
series: [
//
{
type: "pie",
center: ["40%", "55%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['40%', '55%'],
data: [
{
value: datas.value,
label: {
normal: {
formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'rgba(0, 255, 134, 0.29)'
}, {
offset: 1,
color: 'rgba(0, 255, 134, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: '#095b9b', //
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#095b9b' //
}
}
}]
}
]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -1,145 +0,0 @@
<template>
<div ref="chart" style="width: 50%; height: 220px;"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const datas = {
value: 65.1,
text: "独 生 子 女"
}
let option = {
series: [
//
{
type: "pie",
center: ["60%", "45%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['60%', '45%'],
data: [
{
value: datas.value,
label: {
normal: {
formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgba(255, 224, 0, 0.29)'
}, {
offset: 1,
color: 'rgba(255, 224, 0, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: 'rgba(255, 224, 0, 0.1)', //
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(255, 224, 0, 0.1)' //
}
}
}]
}
]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -1,145 +0,0 @@
<template>
<div ref="chart" style="width: 50%;height: 220px;"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const datas = {
value: 0.1,
text: "享 受 低 保"
}
let option = {
series: [
//
{
type: "pie",
center: ["40%", "45%"],
radius: ["50%", "82%"],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(193, 229, 255, .1)",
color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
{
offset: 1,
color: "rgba(127, 242, 255, .2)",
},
{
offset: 0,
color: "rgba(109, 195, 255, 0)",
},
]),
},
},
tooltip: {
show: false,
},
label: {
show: false,
},
data: [100],
},
/*内心原型图,展示整体数据概览*/
{
name: 'pie',
type: 'pie',
roundCap: true,
clockWise: true,
startAngle: 180,
labelLine: {
show: false
},
radius: ['50%', '70%'],
hoverAnimation: false,
center: ['40%', '45%'],
data: [
{
value: datas.value,
label: {
normal: {
formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
position: 'center',
show: true,
textStyle: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
lineHeight: 30,
rich: {
cell: {
fontSize: '24',
fontWeight: 'normal',
color: '#fff',
},
text: {
fontSize: 16,
fontFamily: 'FZLanTingHeiS-L-GB',
color: '#fff',
}
}
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
offset: 0,
color: 'rgba(254, 135, 98, 0.29)'
}, {
offset: 1,
color: 'rgba(254, 135, 98, 1)'
}]),
shadowColor: 'rgba(1,1,1,0.5)',
shadowBlur: 1
}
}
},
{
value: 100 - datas.value,
name: '',
itemStyle: {
normal: {
color: 'rgba(254, 135, 98, 0.1)', //
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: 'rgba(254, 135, 98, 0.1)' //
}
}
}]
}
]
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -1,159 +0,0 @@
<template>
<div
ref="chart"
style="width: 100%; height: 350px"
></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(null); // DOM
const data1 = [
"龙游县人民医院",
"龙游县中医院",
"龙游县横山镇中心卫生院",
"龙游县溪水镇中心卫生院",
"龙游县龙游街道社区卫生服务中心",
"龙游县塔石镇中心卫生院",
"龙游县罗家县中心卫生院",
"龙游县社阳乡卫生院",
"龙游妇幼保健院",
"龙游妇幼保健院",
"龙游妇幼保健院",
"龙游妇幼保健院",
"龙游妇幼保健院",
];
const data2 = [
"200",
"200",
"120",
"200",
"420",
"100",
"100",
"100",
"120",
"333",
];
let option = {
grid: {
left: "0%",
right: "10%",
bottom: "1%",
top: "6%",
containLabel: true,
},
tooltip: {
trigger: "axis", //axis , item
},
// backgroundColor: '#002D54',
xAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
type: "line",
},
},
axisTick: {
show: true,
},
splitLine: {
show: false,
},
axisLabel: {
// x
show: false,
textStyle: {
color: "#00c0fa",
fontSize: 16,
},
},
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#ffffff",
fontSize: "11",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data1,
},
],
series: [
{
name: "道路指数",
type: "bar",
zlevel: 1,
label: {
show: true,
position: "right", //
color: "#ffffff",
fontSize: 12,
distance: 10, //
// formatter: '{c}%' //
}, //
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(0, 183, 255, 1)",
borderRadius: [0, 0, 50, 0], //
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(0, 183, 255, 0)" },
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
]),
},
},
barWidth: 10,
data: data2,
},
],
};
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
myChart.on("scroll", function (event) {
// bargap
var bargap = event.scrollData / 10000; // 1%0.5bargap
myChart.setOption({
yAxis: {
axisLabel: {
bargap: bargap,
},
},
});
});
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -1,207 +0,0 @@
<template>
<div
ref="chart"
style="width: 100%; height: 250px"
></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
const data1 = [
"龙游县人民医院",
"龙游县中医院",
"龙游县横山镇中心卫生院",
"龙游县溪水镇中心卫生院",
"龙游县龙游街道社区卫生服务中心",
"龙游县塔石镇中心卫生院",
"龙游县罗家县中心卫生院",
];
let option = {
tooltip: {
trigger: "axis",
// formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
grid: {
top: "10%",
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
formatter: function (params) {
var str = ""; //
var paramsLen = params.length; //
var len = 5; //
var rowNumber = Math.ceil(paramsLen / len); //
if (paramsLen > len) {
//len
for (var i = 0; i < rowNumber; i++) {
var temp = ""; //
var start = i * len; //
var end = start + len; //
if (i == rowNumber - 1) {
//
temp = params.substring(start, paramsLen);
} else {
//
temp = params.substring(start, end) + "\n";
}
str += temp; //
}
} else {
//
str = params;
}
return str; //
},
textStyle: {
color: "#ffffff",
},
rotate: 30,
},
data: data1,
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
},
},
},
],
series: [
{
name: "职工医疗保险发放人次",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6,7,8],
barWidth: 20,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"],
["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"],
["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"],
];
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
},
},
},
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped>
</style>

View File

@ -1,123 +0,0 @@
<template>
<div ref="chart" style="width: 100%;height:230px;"></div>
</template>
<script setup >
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
// formatter: "{b0}<br />{a1}:{c1} <br />{a2}:{c2} ",
},
legend: {
data: ["高血压", "糖尿病"],
top: "5%",
right: "11%",
textStyle: {
fontSize: 12,
color: "#ccc",
},
},
grid: {
top:'18%',
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: ["2019", "2020", "2021", "2022", "2023"],
axisLabel: {
//
textStyle: {
color: "#ccc",
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ccc",
},
},
},
series: [
{
name: "背景",
type: "bar",
data: [0, 0, 0, 0, 0],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "高血压",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
data: [120, 132, 101, 134, 90],
},
{
name: "糖尿病",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#2468FF",
borderWidth: 1,
color: "#2468FF",
},
data: [150, 232, 201, 154, 190],
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped>
</style>

View File

@ -1,163 +0,0 @@
<template>
<div ref="chart" style="width: 100%; height: 210px"></div>
</template>
<script setup >
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
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,
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "高血压人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
label: {
show: true,
color: "#ffffff",
position:'top',
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: "rgba(0, 252, 255, 0.50)",
},
{
offset: 1,
color: "rgba(0, 252, 255, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: data.list,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -254,23 +254,6 @@
<div class="flex1">
<div style="display: flex; justify-content: center">
<div class="czr-bj">
<!-- <div>
<div class="czrBox">
<div class="situation situation1"></div>
<edxs
:list="data.whistleblower.culeTotal.data"
:month="data.whistleblower.culeTotal.time"
></edxs>
</div>
<div class="czrBox">
<div class="situation situation2"></div>
<edxs1
:list="data.whistleblower.gaCules.data"
:month="data.whistleblower.gaCules.time"
></edxs1>
</div>
</div> -->
<!-- <div> -->
<div class="czrBox">
<div class="situation situation3"></div>
<edxs2
@ -296,17 +279,8 @@
<div class="clueUnit"></div>
</div>
</div>
<!-- <div class="czrBox">
<div class="situation situation4"></div>
<edxs3
:list="data.whistleblower.jcgCules.data"
:month="data.whistleblower.jcgCules.time"
></edxs3>
</div> -->
<!-- </div> -->
</div>
</div>
<!-- <eBubble></eBubble> -->
</div>
</div>
<Dialog
@ -324,19 +298,9 @@
<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import edxs from "./echarts_education/edXS.vue";
import edxs1 from "./echarts_education/edXS1.vue";
import edxs2 from "./echarts_education/edXS2.vue";
import edxs3 from "./echarts_education/edXS3.vue";
import edie5 from "./echarts_education/pie5.vue";
import edie from "./echarts_education/pie.vue";
import edCSR from "./echarts_education/edCSR.vue";
import edXX from "./echarts_education/edXX.vue";
import ePie1 from "./echarts_education/pie1.vue";
import ePie2 from "./echarts_education/pie2.vue";
import ePie3 from "./echarts_education/pie3.vue";
import ePie4 from "./echarts_education/pie4.vue";
import ePieRose from "./echarts_education/pieRose.vue";
import eP1 from "./echarts_education/eP1.vue";
import http from "@/utils/request.js";

View File

@ -159,8 +159,8 @@ const login = () => {
})
.catch((err) => {
console.log(err);
var token = getCookie("lytoken");
// var token = '6b0e380b4a8f46baae4923f83faf670d';
// var token = getCookie("lytoken");
var token = '6b0e380b4a8f46baae4923f83faf670d';
// console.log('token', token)
if (!token) {
window.location.href =

View File

@ -263,10 +263,7 @@ import ePie2 from "./echarts_hygiene/pie2.vue";
import ePie3 from "./echarts_hygiene/pie3.vue";
import ePie3_1 from "./echarts_hygiene/pie3_1.vue";
import ePie4 from "./echarts_hygiene/pie4.vue";
import eP2 from "./echarts_hygiene/eP2.vue";
import eP3 from "./echarts_hygiene/eP3.vue";
import eP7 from "./echarts_hygiene/eP7.vue";
import eP6 from "./echarts_hygiene/eP6.vue";
import eP5 from "./echarts_hygiene/eP5.vue";
import eP4 from "./echarts_hygiene/eP4.vue";
import eP4_1 from "./echarts_hygiene/eP4_1.vue";

View File

@ -324,19 +324,10 @@
<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import edxs from "../echarts_education/edXS.vue";
import edxs1 from "../echarts_education/edXS1.vue";
import edxs2 from "../echarts_education/edXS2.vue";
import edxs3 from "../echarts_education/edXS3.vue";
import edie5 from "../echarts_education/pie5.vue";
import edie from "../echarts_education/pie.vue";
import edCSR from "../echarts_education/edCSR.vue";
import edXX from "../echarts_education/edXX.vue";
import ePie1 from "../echarts_education/pie1.vue";
import ePie2 from "../echarts_education/pie2.vue";
import ePie3 from "../echarts_education/pie3.vue";
import ePie4 from "../echarts_education/pie4.vue";
import ePieRose from "../echarts_education/pieRose.vue";
import eP1 from "../echarts_education/eP1.vue";
import http from "@/utils/request.js";

View File

@ -269,10 +269,7 @@ import ePie2 from "../echarts_hygiene/pie2.vue";
import ePie3 from "../echarts_hygiene/pie3.vue";
import ePie3_1 from "../echarts_hygiene/pie3_1.vue";
import ePie4 from "../echarts_hygiene/pie4.vue";
import eP2 from "../echarts_hygiene/eP2.vue";
import eP3 from "../echarts_hygiene/eP3.vue";
import eP7 from "../echarts_hygiene/eP7.vue";
import eP6 from "../echarts_hygiene/eP6.vue";
import eP5 from "../echarts_hygiene/eP5.vue";
import eP4 from "../echarts_hygiene/eP4.vue";
import eP4_1 from "../echarts_hygiene/eP4_1.vue";