This commit is contained in:
duanxiaohai
parent
a07a4a2efe
commit
37be4d4727
|
|
@ -560,11 +560,11 @@ const setChart = () => {
|
|||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
pieData[0].value = data.list.nl5160;
|
||||
pieData[1].value = data.list.nl6170;
|
||||
pieData[2].value = data.list.nl7180;
|
||||
pieData[3].value = data.list.nl8190;
|
||||
pieData[4].value = data.list.nl91100;
|
||||
pieData[0].value = data.list.nl6170;
|
||||
pieData[1].value = data.list.nl7180;
|
||||
pieData[2].value = data.list.nl8190;
|
||||
pieData[3].value = data.list.nl91100;
|
||||
pieData[4].value = data.list.nl100;
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
|
|
|
|||
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 340px; height: 250px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const data = [120, 200, 150, 80, 70];
|
||||
const lineData = [150, 230, 224, 218, 135];
|
||||
const max = data
|
||||
.concat(lineData)
|
||||
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
// 背景颜色
|
||||
const color = [
|
||||
{
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(142, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(142, 187, 255, 0.5)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(142, 187, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const option = {
|
||||
color,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
||||
axisPointer: {},
|
||||
},
|
||||
legend: {
|
||||
data: ["上门服务时长", "上门服务次数"],
|
||||
// top: "8%",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
calculable: true,
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
scale: true,
|
||||
name: "时长/小时",
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
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",
|
||||
scale: true,
|
||||
name: "次数/次",
|
||||
min: 0,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
width: 1,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
width: 1,
|
||||
type: "solid",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
lineHeight: 19,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
z: 1,
|
||||
yAxisIndex: 0,
|
||||
name: "上门服务时长",
|
||||
data: data,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
|
||||
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
|
||||
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
|
||||
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: "上门服务次数",
|
||||
data: lineData,
|
||||
type: "line", //线状图
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
formatter: function (data) {
|
||||
return data.value;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
color: "#00FCFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 2,
|
||||
itemStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
|
||||
},
|
||||
data: data.map(() => 100),
|
||||
barWidth: 40, //外阴影背景宽
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(64, 247, 176, 0.25)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(17, 34, 64, 0.25)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
type: "bar",
|
||||
},
|
||||
//顶部四边形
|
||||
{
|
||||
z: 1,
|
||||
name: "上部1",
|
||||
type: "pictorialBar",
|
||||
symbolPosition: "end",
|
||||
data: data,
|
||||
symbol: "diamond",
|
||||
symbolOffset: ["0%", "-50%"],
|
||||
symbolSize: [22, 15],
|
||||
itemStyle: {
|
||||
borderColor: "#2fffa4",
|
||||
color: "rgba(142, 187, 255, 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>
|
||||
|
|
@ -35,9 +35,11 @@ const data = reactive({
|
|||
initialLegendData: ["上门服务时长", "上门服务次数"],
|
||||
});
|
||||
|
||||
const data1 = [120, 200, 150, 80, 70, 110, 130];
|
||||
const lineData = [150, 230, 224, 218, 135, 147, 260];
|
||||
const max = data.list1.concat(data.list2).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
// const data1 = [120, 200, 150, 80, 70];
|
||||
// const lineData = [150, 230, 224, 218, 135];
|
||||
// const max = data
|
||||
// .concat(lineData)
|
||||
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
// 背景颜色
|
||||
const color = [
|
||||
{
|
||||
|
|
@ -68,12 +70,7 @@ const getOption = () => {
|
|||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#3F82F7", //提示文字标题颜色
|
||||
},
|
||||
},
|
||||
axisPointer: {},
|
||||
},
|
||||
legend: {
|
||||
data: data.initialLegendData,
|
||||
|
|
@ -120,7 +117,6 @@ const getOption = () => {
|
|||
type: "value",
|
||||
scale: true,
|
||||
name: "时长/小时",
|
||||
max: max,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
|
|
@ -152,7 +148,6 @@ const getOption = () => {
|
|||
scale: true,
|
||||
name: "次数/次",
|
||||
min: 0,
|
||||
max: max,
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
|
|
@ -180,13 +175,54 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dotted",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
fontSize: 16,
|
||||
color: "#ffffff",
|
||||
lineHeight: 19,
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
z: 1,
|
||||
yAxisIndex: 0,
|
||||
name: "上门服务时长",
|
||||
data: data.list1,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
|
||||
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
|
||||
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
|
||||
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
|
|
@ -196,6 +232,7 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: "上门服务次数",
|
||||
data: data.list2,
|
||||
type: "line", //线状图
|
||||
|
|
@ -215,10 +252,11 @@ const getOption = () => {
|
|||
},
|
||||
{
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 2,
|
||||
itemStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
|
||||
},
|
||||
data: data.list1.map(() => max),
|
||||
data: data.list1.map(() => 100),
|
||||
barWidth: 40, //外阴影背景宽
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
|
|
@ -243,10 +281,41 @@ const getOption = () => {
|
|||
},
|
||||
type: "bar",
|
||||
},
|
||||
//顶部四边形
|
||||
{
|
||||
z: 1,
|
||||
name: "上部1",
|
||||
type: "pictorialBar",
|
||||
symbolPosition: "end",
|
||||
data: data.list1,
|
||||
symbol: "diamond",
|
||||
symbolOffset: ["0%", "-50%"],
|
||||
symbolSize: [22, 15],
|
||||
itemStyle: {
|
||||
borderColor: "#2fffa4",
|
||||
color: "rgba(142, 187, 255, 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();
|
||||
// // });
|
||||
// });
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
|
|
@ -259,7 +328,6 @@ const setChart1 = () => {
|
|||
data.list1.push(item.sc); //服务时长
|
||||
data.list2.push(item.fwcs); //服务次数
|
||||
});
|
||||
console.log(data.list1,data.list2, "助老服务");
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
|
|
@ -273,7 +341,6 @@ onBeforeMount(() => {
|
|||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue