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 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";
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue