tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第二层图标

Browse Source
This commit is contained in:
MTrunning
2020-03-18 17:01:30 +08:00
parent 1053415c2e
commit b964ff666e
15 changed files with 1313 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echart/center.vue
+341
View File
@@ -0,0 +1,341 @@
<template>
<div>
<div id="centreLeft1Chart"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie(sidebar) {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft1Chart")
);
// ----------------------------------------------------------------
var value = 83;
let option = {
backgroundColor: "000",
title: {
text: `${value}分`,
subtext: "综合健康评分",
left: "center",
top: "center", //top待调整
textStyle: {
color: "#fff",
fontSize: 80,
fontFamily: "DINAlternate-Bold"
},
subtextStyle: {
color: "#ff",
fontSize: 35,
fontFamily: "PingFangSC-Regular",
top: "center"
},
itemGap: -4 //主副标题间距
},
xAxis: {
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
}
// data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
}
},
series: [
// 内圆
{
type: "pie",
radius: ["0", "50%"],
center: ["50%", "50%"],
z: 0,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#1147A1"
},
{
offset: 0.5,
color: "#423DB3"
},
{
offset: 1,
color: "#1147A1"
}
]),
label: {
show: false
},
labelLine: {
show: false
}
}
},
label: {
normal: {
position: "center"
}
},
data: [100]
},
// 进度圈
{
type: "pie",
clockWise: true,
radius: ["60%", "55%"],
data: [
{
value: value,
itemStyle: {
normal: {
borderWidth: 10,
borderColor: {
colorStops: [
{
offset: 0,
color: "#7940FE" || "#00cefc" // 0% 处的颜色
},
{
offset: 1,
color: "#2A69EC" || "#367bec" // 100% 处的颜色
}
]
},
color: {
// 完成的圆环的颜色
colorStops: [
{
offset: 0,
color: "#7940FE" || "#00cefc" // 0% 处的颜色
},
{
offset: 1,
color: "#2A69EC" || "#367bec" // 100% 处的颜色
}
]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
name: "gap",
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0
}
}
}
]
},
//刻度尺
{
// name: "白色圈刻度",
type: "gauge",
radius: "67%",
startAngle: 225, //刻度起始
endAngle: -134.8, //刻度结束
z: 4,
axisTick: {
show: true,
lineStyle: {
width: 2,
color: "rgba(1,244,255, 0.9)"
}
},
splitLine: {
length: 16, //刻度节点线长度
lineStyle: {
width: 2,
color: "rgba(1,244,255, 0.9)"
} //刻度节点线
},
axisLabel: {
color: "rgba(255,255,255,0)",
fontSize: 12
}, //刻度节点文字颜色
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [
{
value: 0,
name: ""
}
]
},
// 刻度圈
{
type: "pie",
radius: ["0%", "73%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: false,
textStyle: {
fontWeight: "bold"
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.05,
color: "rgba(32,36,107, 0.2)"
},
{
offset: 0.5,
color: "rgba(32,36,107,0.3)"
},
{
offset: 0.95,
color: "rgba(32,36,107, 0.2)"
}
]
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 3235
}
]
},
//最外层圈
{
type: "pie",
radius: ["0%", "85%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: false,
textStyle: {
fontWeight: "bold"
}
}
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0.05,
color: "rgba(21,24,65, 0.2)"
},
{
offset: 0.5,
color: "rgba(21,24,65, 0.3)"
},
{
offset: 0.95,
color: "rgba(21,24,65, 0.2)"
}
]
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 3235
}
]
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
</style>
src/components/echart/centreLeft1Chart.vue
+87
View File
@@ -0,0 +1,87 @@
<template>
<div>
<div id="centreLeft1Chart" style="width:260px; height: 220px;"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie(sidebar) {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft1Chart")
);
// ----------------------------------------------------------------
myChartPieLeft.setOption({
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
textStyle: {
color: "#fff"
}
},
series: [
{
name: "增值电信业务统计表",
type: "pie",
radius: [10, 60],
roseType: "area",
center: ["50%", "40%"],
data: [
{ value: 10, name: "rose1" },
{ value: 5, name: "rose2" },
{ value: 15, name: "rose3" },
{ value: 25, name: "rose4" },
{ value: 20, name: "rose5" },
{ value: 35, name: "rose6" }
]
}
]
});
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
</style>
src/components/echart/centreLeft2Chart.vue
+208
View File
@@ -0,0 +1,208 @@
<template>
<div>
<div id="centreLeft2Chart" style="width:330px; height: 370px;"></div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie(sidebar) {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreLeft2Chart")
);
// ----------------------------------------------------------------
let option = {
angleAxis: {
interval: 1,
type: "category",
data: [
"there1",
"there2",
"there3",
"there4",
"there5",
"there6",
"there7",
"there8",
"there9",
"there10 "
],
z: 10,
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
axisLabel: {
interval: 0,
show: true,
color: "#00c7ff",
margin: 8,
fontSize: 12
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 20,
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#00c7ff",
fontSize: 16
},
splitLine: {
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
}
},
legend: {
show: true,
orient: "vartical",
top: "center",
bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: {
color: "#A3E2F4",
fontSize: 12,
fontWeight: 0
},
data: ["A"]
},
polar: {},
series: [
{
name: "A",
type: "bar",
radius: ["20%", "100%"],
data: [
{
value: 87,
itemStyle: {
normal: {
color: "#f54d4d"
}
}
},
{
value: 80,
itemStyle: {
normal: {
color: "#f87544"
}
}
},
{
value: 75,
itemStyle: {
normal: {
color: "#ffae00"
}
}
},
{
value: 69,
itemStyle: {
normal: {
color: "#dcff00"
}
}
},
{
value: 63,
itemStyle: {
normal: {
color: "#25d053"
}
}
},
{
value: 54,
itemStyle: {
normal: {
color: "#01fff5"
}
}
},
{
value: 47,
itemStyle: {
normal: {
color: "#007cff"
}
}
},
{
value: 40,
itemStyle: {
normal: {
color: "#4245ff"
}
}
},
{
value: 35,
itemStyle: {
normal: {
color: "#c32eff"
}
}
},
{
value: 33,
itemStyle: {
normal: {
color: "#ff62e8"
}
}
}
],
coordinateSystem: "polar"
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
</style>
src/components/echart/centreRight2/centreRight2Chart1.vue
+174
View File
@@ -0,0 +1,174 @@
<template>
<div>
<div id="centreRight2Chart1" style="width:260px; height: 215px;">123</div>
</div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {};
},
mounted() {
this.drawPie();
},
methods: {
drawPie(sidebar) {
// 基于准备好的dom，初始化echarts实例
let myChartPieLeft = echarts.init(
document.getElementById("centreRight2Chart1")
);
// ----------------------------------------------------------------
// Schema:
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
var dataBJ = [
[94, 69, 114, 2.08, 73, 39, 22],
[99, 73, 110, 2.43, 76, 48, 23],
[31, 12, 30, 0.5, 32, 16, 24],
[42, 27, 43, 1, 53, 22, 25],
[154, 117, 157, 3.05, 92, 58, 26],
[234, 185, 230, 4.09, 123, 69, 27],
[160, 120, 186, 2.77, 91, 50, 28]
];
var dataGZ = [
[84, 94, 140, 2.238, 68, 18, 22],
[93, 77, 104, 1.165, 53, 7, 23],
[99, 130, 227, 3.97, 55, 15, 24],
[146, 84, 139, 1.094, 40, 17, 25],
[113, 108, 137, 1.481, 48, 15, 26],
[81, 48, 62, 1.619, 26, 3, 27],
[56, 48, 68, 1.336, 37, 9, 28]
];
var dataSH = [
[91, 45, 125, 0.82, 34, 23, 1],
[65, 27, 78, 0.86, 45, 29, 2],
[83, 60, 84, 1.09, 73, 27, 3],
[109, 81, 121, 1.28, 68, 51, 4],
[106, 77, 114, 1.07, 55, 51, 5],
[109, 81, 121, 1.28, 68, 51, 6],
[106, 77, 114, 1.07, 55, 51, 7]
];
var lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
let option = {
radar: {
indicator: [
{ name: "AQI", max: 300 },
{ name: "PM2.5", max: 250 },
{ name: "PM10", max: 300 },
{ name: "CO", max: 5 },
{ name: "NO2", max: 200 },
{ name: "SO2", max: 100 }
],
shape: "circle",
splitNumber: 5,
name: {
textStyle: {
color: "rgb(238, 197, 102)"
}
},
splitLine: {
lineStyle: {
color: [
"rgba(238, 197, 102, 0.1)",
"rgba(238, 197, 102, 0.2)",
"rgba(238, 197, 102, 0.4)",
"rgba(238, 197, 102, 0.6)",
"rgba(238, 197, 102, 0.8)",
"rgba(238, 197, 102, 1)"
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(238, 197, 102, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
lineStyle: lineStyle,
data: dataBJ,
symbol: "none",
itemStyle: {
normal: {
color: "#F9713C"
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: "上海",
type: "radar",
lineStyle: lineStyle,
data: dataSH,
symbol: "none",
itemStyle: {
normal: {
color: "#B3E4A1"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: "广州",
type: "radar",
lineStyle: lineStyle,
data: dataGZ,
symbol: "none",
itemStyle: {
normal: {
color: "rgb(238, 197, 102)"
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
}
]
};
myChartPieLeft.setOption(option);
// -----------------------------------------------------------------
// 响应式变化
window.addEventListener("resize", () => myChartPieLeft.resize(), false);
//侧边栏变化
if (sidebar) {
myChartPieLeft.resize();
}
}
},
destroyed() {
window.onresize = null;
}
};
</script>
<style lang="scss" scoped>
#centreRight2Chart1{
margin: 0 auto;
}
</style>
src/components/echart/centreRightListChart.vue
View File