ggfwjsc/src/view/echarts_education/pie.vue

275 lines
6.3 KiB
Vue
Raw Normal View History

2024-04-17 15:25:43 +08:00
<template>
2024-05-14 10:00:40 +08:00
<div ref="chart" style="width: 50%; height: 280px"></div>
2024-04-17 15:25:43 +08:00
</template>
2024-04-17 16:53:36 +08:00
<script setup>
2024-05-14 10:00:40 +08:00
import { onBeforeMount, onMounted, reactive, ref } from "vue";
2024-04-17 15:25:43 +08:00
// 局部引入echarts核心模块
import * as echarts from "echarts";
2024-05-14 10:00:40 +08:00
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
2024-04-17 15:25:43 +08:00
const chart = ref(); // 创建DOM引用
2024-05-14 10:00:40 +08:00
const data = reactive({
list: [[], []],
option: {},
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
2024-06-03 15:17:33 +08:00
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
legend: {
2024-06-03 15:17:33 +08:00
data: ["县镇", "农村"],
2024-05-14 10:00:40 +08:00
top: "8%",
right: "11%",
textStyle: {
2024-05-22 15:04:24 +08:00
fontSize: 16,
2024-05-21 15:56:26 +08:00
color: "#ffffff",
2024-04-17 15:25:43 +08:00
},
},
2024-05-14 10:00:40 +08:00
grid: {
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
2024-05-21 15:56:26 +08:00
color: "#ffffff",
2024-05-22 15:04:24 +08:00
fontSize: 16,
2024-05-14 10:00:40 +08:00
},
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
axisTick: {
show: false, // 设置轴刻度不显示
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
data: ["小学", "初中", "高中"],
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
{
axisTick: false,
type: "category",
data: ["小学", "初中", "高中"],
axisLabel: {
show: false,
2024-04-17 15:25:43 +08:00
},
},
2024-05-14 10:00:40 +08:00
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
2024-05-21 15:56:26 +08:00
color: "#ffffff",
2024-05-22 15:04:24 +08:00
fontSize: 16,
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
},
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
},
axisLabel: {
show: false,
2024-05-22 15:04:24 +08:00
fontSize: 16,
2024-05-14 10:00:40 +08:00
fontFamily: "MicrosoftYaHei",
2024-05-21 15:56:26 +08:00
color: "#ffffff",
2024-05-14 10:00:40 +08:00
lineHeight: 19,
},
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
],
series: [
// {
// name: "城市",
// type: "bar",
// data: [2.0, 4.9, 7.0],
// barWidth: "18%",
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
2024-06-03 15:17:33 +08:00
// color: "rgba(23, 136, 255, 1)",
2024-05-14 10:00:40 +08:00
// },
// {
// offset: 1,
2024-06-03 15:17:33 +08:00
// color: "rgba(23, 136, 255, 0.20)",
2024-05-14 10:00:40 +08:00
// },
// ]),
// },
// },
{
2024-06-03 15:17:33 +08:00
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list[1],
symbol: "diamond",
2024-06-19 11:11:37 +08:00
symbolOffset: ["-60%", "-50%"],
2024-06-03 15:17:33 +08:00
symbolSize: [19, 10],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 136, 255, 1)",
},
},
{
z: 1,
2024-06-19 11:11:37 +08:00
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
2024-05-14 10:00:40 +08:00
name: "县镇",
type: "bar",
data: data.list[1],
2024-06-03 15:17:33 +08:00
barWidth: "25%",
label: {
show: true,
position: "top",
color: "#ffffff",
2024-07-13 13:37:35 +08:00
fontSize:'17',
2024-06-03 15:17:33 +08:00
formatter: function (data) {
return data.value;
},
},
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)" },
],
},
},
2024-05-23 16:58:42 +08:00
},
2024-06-19 11:11:37 +08:00
{
2024-06-03 15:17:33 +08:00
z: 2,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list[0],
symbol: "diamond",
2024-06-19 11:11:37 +08:00
symbolOffset: ["62%", "-50%"],
2024-06-03 15:17:33 +08:00
symbolSize: [19, 10],
2024-05-14 10:00:40 +08:00
itemStyle: {
2024-06-03 15:17:33 +08:00
borderColor: "#32ffee",
2024-06-19 11:11:37 +08:00
color: "rgba(23, 237, 255, 1)",
2024-05-14 10:00:40 +08:00
},
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
{
2024-06-19 11:11:37 +08:00
z: 2,
2024-05-14 10:00:40 +08:00
name: "农村",
type: "bar",
2024-06-19 11:11:37 +08:00
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
2024-05-14 10:00:40 +08:00
data: data.list[0],
2024-06-03 15:17:33 +08:00
barWidth: "25%",
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
2024-05-14 10:00:40 +08:00
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
2024-06-03 15:17:33 +08:00
},
2024-06-19 11:11:37 +08:00
itemStyle: {
2024-06-03 15:17:33 +08:00
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
2024-05-14 10:00:40 +08:00
},
2024-04-17 15:25:43 +08:00
},
2024-05-14 10:00:40 +08:00
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
2024-05-22 15:04:24 +08:00
fontSize: 16,
2024-05-14 10:00:40 +08:00
},
data: ["2019", "2020", "2021"].map(() => 100),
barWidth: 70,
},
],
};
2024-04-17 15:25:43 +08:00
};
2024-05-14 10:00:40 +08:00
const setChart = () => {
2024-04-17 15:25:43 +08:00
// Vue3中 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
2024-05-14 10:00:40 +08:00
myChart.setOption(data.option);
};
// 使用生命钩子
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
// data.list[0].push(data.list.ncxx.nccz);
// data.list[0].push(data.list.ncxx.ncgz);
// data.list[0].push(data.list.ncxx.ncxx);
// data.list[1].push(data.list.xzxx.xzcz);
// data.list[1].push(data.list.xzxx.xzgz);
// data.list[1].push(data.list.xzxx.xzxx);
getOption();
setChart();
}, 600);
2024-04-17 15:25:43 +08:00
});
</script>
2024-04-17 16:53:36 +08:00
<style scoped></style>