<!-- @format -->
<template>
<div class="content-chart">
<div class="chartContainer1" id="chartContainer1" ref="ChartEl1"></div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import * as echarts from 'echarts';
// import { get_all_data } from './main';
export default defineComponent({
name: 'Dashboard',
props: {},
data() {
return {
// map: {},
// growthRatioRate: null,
// complaintSumCount: 0, //累计投诉数量
// todayComplaintCount: 0, //今日投诉数量
// sumCount: null, //累计反馈总数
// todaySumCount: null, //今日反馈总数
// replyCount: null, //累计回复总数
// growthRatioType: null,
// valueStyle: `background: linear-gradient(180deg, #E1F5FE 0%, #E1F5FE 28.7%, #4DC6F5 31.13%, #11B6EE 56.06%);
// -webkit-background-clip:
// text;color: transparent;
// font-size:32px;
// height:40px;
// line-height: 40px;
// font-weight: bold;
// letter-spacing:0px;`,
// chart: null,
// chart1: null,
// dataSource: [],
// selectItem: '',
// timer: {},
};
},
watch: {},
created() {},
mounted() {
// debugger;
// var jsonData = get_all_data();
this.setChart();
},
methods: {
setChart() {
// debugger;
if (!this.chart1) {
this.chart1 = echarts.init(this.$refs.ChartEl1, null, { renderer: 'svg' });
}
this.chart1.clear();
let options1 = {
series: [
{
radius: '80%',
type: 'gauge',
detail: { show: false },
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, '#0EE5E5']],
width: 2,
// ,
// shadowColor: '#fff', //默认透明
// shadowBlur: 10
},
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: false,
},
},
{
type: 'gauge',
// startAngle: -45,
// endAngle: 180,
min: 0,
max: 180,
radius: '75%',
splitNumber: 12,
itemStyle: {
color: 'rgb(82,180,182)',
},
center: ['50%', '50%'],
progress: {
show: true,
// roundCap: true,
width: 18,
itemStyle: {
// borderWidth: 2,
// borderColor: "rgba(227, 18, 18, 1)",
// borderType: "solid",
// borderCap: "square",
// borderMiterLimit:20,
// borderDashOffset:15,
// shadowColor: 'rgba(250, 250, 0, 0.5)',
// shadowBlur: 10,
// shadowOffsetY:30,
// borderType: [15, 15],
// borderSolidOffset: 5,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#73FBFD', // 0% 处的颜色
},
{
offset: 1,
color: '#73FBFD', // 100% 处的颜色
},
],
global: false,
},
},
},
axisLine: {
show: false,
// roundCap: true,
// lineStyle: {
// color: [
// [0, '#1B444F'],
// [1, '#1B4488'],
// ],
// width: 18,
// },
},
// axisLine: { // 仪表盘轴线(轮廓线)相关配置。
// show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
// lineStyle: { // 仪表盘轴线样式。
// color: [
// [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0.1,
// color: "#AAF02E"
// },
// {
// offset: 0.3,
// color: "#CEE326"
// },
// {
// offset: 0.6,
// color: "#EBD212"
// },
// {
// offset: 1,
// color: "#FF6A00"
// }
// ])
// ]
// ],
// // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
// opacity: 0.8, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
// width: 15, //轴线宽度,默认 30。
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
// shadowColor: "#fff", //阴影颜色。支持的格式同color。
// }
// },
pointer: {
//circle', 'rect', 'roundRect' 'triangle', 'diamond', 'pin', 'arrow', 'none'
// icon:'path://M1.28582 2.53393L34.9873 16.8505,M1.28582 2.53393L34.9873 16.8505,M1.28564 1.98535L21.0455 10.7669',
length: '75%',
},
anchor: {
show: true,
size: 6,
icon: 'circle',
itemStyle: {
color: '#fff',
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
// distance: 2,
// length: 6,
// show: true,
// lineStyle: {
// width: 1,
// },
},
axisLabel: {
show: false,
},
detail: {
color: '#0FB9DC',
fontSize: 28,
fontWeight: 'bold',
offsetCenter: [0, '50%'],
formatter: function (value) {
// return 80 + '%';
return '{80|' + value.toFixed(0) + '}{unit|%}';
},
rich: {
// value: {
// fontSize: 50,
// fontWeight: 'bolder',
// color: '#777000'
// },
unit: {
fontSize: 15,
color: '#0FB9DC',
padding: [0, 0, -15, 2],
},
},
},
data: [
{
value: 80,
name: '',
},
],
},
{
radius: '58%',
type: 'gauge',
detail: { show: false },
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, '#0EE5E5']],
width: 2,
opacity: 0.4,
// ,
// shadowColor: '#fff', //默认透明
// shadowBlur: 10
},
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: false,
},
},
{
radius: '58%',
type: 'gauge',
detail: { show: false },
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[1, '#0EE5E5']],
width: 16,
opacity: 0.2,
// ,
// shadowColor: '#fff', //默认透明
// shadowBlur: 10
},
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: false,
},
},
{
//内圆1
type: 'pie',
radius: '20%',
center: ['50%', '50%'],
z: 1,
itemStyle: {
normal: {
color: '#0EE5E5',
opacity: 0.2,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false,
},
data: [100],
},
{
//内圆1
type: 'pie',
radius: '15%',
center: ['50%', '50%'],
z: 1,
itemStyle: {
normal: {
color: '#0EE5E5',
opacity: 0.2,
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false,
},
data: [100],
},
// ,
// {
// radius: '20%',
// type: 'gauge',
// startAngle:0,
// endAngle:360,
// detail: {show:false},
// axisLine: { // 坐标轴线
// lineStyle: { // 属性lineStyle控制线条样式
// color: [ [1, '#0EE5E5']],
// width: 16,
// opacity:0.2
// // ,
// // shadowColor: '#fff', //默认透明
// // shadowBlur: 10
// }
// },
// axisLabel:{
// show:false
// },
// splitLine:{
// show:false
// },
// axisTick:{
// show:false
// },
// pointer:{
// show:false
// }
// }
],
};
this.chart1.setOption(options1, { notMerge: false });
},
},
});
</script>
<style lang="less" scoped>
.content-chart {
margin: 30px auto;
padding: 0 16px;
width: 300px;
height: 300px;
// position: relative;
.chartContainer1 {
height: 100%;
width: 100%;
transform: translateX(-20px);
}
}
</style>