This commit is contained in:
parent
c3a7bcb1d0
commit
ded66c73e0
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value)
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
window.addEventListener('resize',()=>{
|
|
||||||
myChart.resize()
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value)
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
window.addEventListener('resize',()=>{
|
|
||||||
myChart.resize()
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
myChart.resize();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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: {
|
|
||||||
//线性渐变，前4个参数分别是x0,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, //shadowBlur设图形阴影的模糊大小。配合shadowColor,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>
|
|
||||||
|
|
@ -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: {
|
|
||||||
//线性渐变，前4个参数分别是x0,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, //shadowBlur设图形阴影的模糊大小。配合shadowColor,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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
myChart.on("scroll", function (event) {
|
|
||||||
// 根据滚动位置动态计算bargap
|
|
||||||
var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
|
|
||||||
myChart.setOption({
|
|
||||||
yAxis: {
|
|
||||||
axisLabel: {
|
|
||||||
bargap: bargap,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
|
|
@ -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(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
|
|
@ -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: {
|
|
||||||
//线性渐变，前4个参数分别是x0,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, //shadowBlur设图形阴影的模糊大小。配合shadowColor,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>
|
|
||||||
|
|
@ -254,23 +254,6 @@
|
||||||
<div class="flex1">
|
<div class="flex1">
|
||||||
<div style="display: flex; justify-content: center">
|
<div style="display: flex; justify-content: center">
|
||||||
<div class="czr-bj">
|
<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="czrBox">
|
||||||
<div class="situation situation3"></div>
|
<div class="situation situation3"></div>
|
||||||
<edxs2
|
<edxs2
|
||||||
|
|
@ -296,17 +279,8 @@
|
||||||
<div class="clueUnit">条</div>
|
<div class="clueUnit">条</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<!-- <eBubble></eBubble> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
|
|
@ -324,19 +298,9 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
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 edxs2 from "./echarts_education/edXS2.vue";
|
||||||
import edxs3 from "./echarts_education/edXS3.vue";
|
|
||||||
import edie5 from "./echarts_education/pie5.vue";
|
import edie5 from "./echarts_education/pie5.vue";
|
||||||
|
|
||||||
import edie from "./echarts_education/pie.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 ePieRose from "./echarts_education/pieRose.vue";
|
||||||
import eP1 from "./echarts_education/eP1.vue";
|
import eP1 from "./echarts_education/eP1.vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
|
|
|
||||||
|
|
@ -159,8 +159,8 @@ const login = () => {
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
var token = getCookie("lytoken");
|
// var token = getCookie("lytoken");
|
||||||
// var token = '6b0e380b4a8f46baae4923f83faf670d';
|
var token = '6b0e380b4a8f46baae4923f83faf670d';
|
||||||
// console.log('token', token)
|
// console.log('token', token)
|
||||||
if (!token) {
|
if (!token) {
|
||||||
window.location.href =
|
window.location.href =
|
||||||
|
|
|
||||||
|
|
@ -263,10 +263,7 @@ import ePie2 from "./echarts_hygiene/pie2.vue";
|
||||||
import ePie3 from "./echarts_hygiene/pie3.vue";
|
import ePie3 from "./echarts_hygiene/pie3.vue";
|
||||||
import ePie3_1 from "./echarts_hygiene/pie3_1.vue";
|
import ePie3_1 from "./echarts_hygiene/pie3_1.vue";
|
||||||
import ePie4 from "./echarts_hygiene/pie4.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 eP7 from "./echarts_hygiene/eP7.vue";
|
||||||
import eP6 from "./echarts_hygiene/eP6.vue";
|
|
||||||
import eP5 from "./echarts_hygiene/eP5.vue";
|
import eP5 from "./echarts_hygiene/eP5.vue";
|
||||||
import eP4 from "./echarts_hygiene/eP4.vue";
|
import eP4 from "./echarts_hygiene/eP4.vue";
|
||||||
import eP4_1 from "./echarts_hygiene/eP4_1.vue";
|
import eP4_1 from "./echarts_hygiene/eP4_1.vue";
|
||||||
|
|
|
||||||
|
|
@ -324,19 +324,10 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
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 edxs2 from "../echarts_education/edXS2.vue";
|
||||||
import edxs3 from "../echarts_education/edXS3.vue";
|
|
||||||
import edie5 from "../echarts_education/pie5.vue";
|
import edie5 from "../echarts_education/pie5.vue";
|
||||||
|
|
||||||
import edie from "../echarts_education/pie.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 ePieRose from "../echarts_education/pieRose.vue";
|
||||||
import eP1 from "../echarts_education/eP1.vue";
|
import eP1 from "../echarts_education/eP1.vue";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
|
|
|
||||||
|
|
@ -269,10 +269,7 @@ import ePie2 from "../echarts_hygiene/pie2.vue";
|
||||||
import ePie3 from "../echarts_hygiene/pie3.vue";
|
import ePie3 from "../echarts_hygiene/pie3.vue";
|
||||||
import ePie3_1 from "../echarts_hygiene/pie3_1.vue";
|
import ePie3_1 from "../echarts_hygiene/pie3_1.vue";
|
||||||
import ePie4 from "../echarts_hygiene/pie4.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 eP7 from "../echarts_hygiene/eP7.vue";
|
||||||
import eP6 from "../echarts_hygiene/eP6.vue";
|
|
||||||
import eP5 from "../echarts_hygiene/eP5.vue";
|
import eP5 from "../echarts_hygiene/eP5.vue";
|
||||||
import eP4 from "../echarts_hygiene/eP4.vue";
|
import eP4 from "../echarts_hygiene/eP4.vue";
|
||||||
import eP4_1 from "../echarts_hygiene/eP4_1.vue";
|
import eP4_1 from "../echarts_hygiene/eP4_1.vue";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue