|
|
@@ -1231,172 +1231,88 @@ export default {
|
|
|
,
|
|
|
qkq_aqcn_chart() {
|
|
|
var myChart = echarts.init(document.getElementById('qkq_aqcn_chart'));
|
|
|
- // mock数据
|
|
|
- const obj = {
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- pointer: {
|
|
|
- // 指针
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- };
|
|
|
- var option = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- splitNumber: 95,
|
|
|
- splitLine: {
|
|
|
- // 分割线
|
|
|
- distance: -50,
|
|
|
- length: 20,
|
|
|
- lineStyle: {
|
|
|
- width: 10,
|
|
|
- color: '#3ff0a3'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- // 轴线
|
|
|
- lineStyle: {
|
|
|
- width: 4,
|
|
|
- color: [[1, '#3300ee11']],
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- show: false,
|
|
|
- color: '#FFAB91'
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show: false,
|
|
|
- },
|
|
|
- ...obj,
|
|
|
- },
|
|
|
- // {
|
|
|
- // type: 'gauge',
|
|
|
- // startAngle: 220,
|
|
|
- // endAngle: -40,
|
|
|
- // splitNumber: 45,
|
|
|
- // splitLine: {
|
|
|
- // length: 30,
|
|
|
- // lineStyle: {
|
|
|
- // width: 14,
|
|
|
- // color: {
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0.25,
|
|
|
- // // r: 0.5,
|
|
|
- // x2: 0,
|
|
|
- // y2: 0,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0, color: 'gray' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // // offset: 1, color: '#52D5F2' // 100% 处的颜色
|
|
|
- // offset: 1, color: 'red' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- // global: false
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // pointer: {
|
|
|
- // // 指针
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // // 刻度值
|
|
|
- // show:false,
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show:false,
|
|
|
- // },
|
|
|
- // axisLine: {
|
|
|
- // lineStyle:{
|
|
|
- // width:4,
|
|
|
- // color: [[1, '#153839']],
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['62%', '70%'],
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- color: ['cyan', 'blue', 'transparent'],
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [
|
|
|
- {value: 120, name: '搜索引擎'},
|
|
|
- {value: 140, name: '直接访问'},
|
|
|
- {value: 100, name: '邮件营销'},
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- radius: '58%',
|
|
|
- startAngle: 220,
|
|
|
- endAngle: -40,
|
|
|
- splitNumber: 25,
|
|
|
- splitLine: {
|
|
|
- length: 5,
|
|
|
- lineStyle: {
|
|
|
- width: 5,
|
|
|
- color: '#4dcbe78f',
|
|
|
- type: 'dotted',
|
|
|
- }
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- // 指针
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // 刻度值
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 4,
|
|
|
- color: [[1, '#3300ee11']],
|
|
|
- }
|
|
|
- },
|
|
|
- detail: {
|
|
|
- valueAnimation: true,
|
|
|
- borderRadius: 8,
|
|
|
- formatter: function (name) {
|
|
|
- return `{a|在线率} \n\n {b|${name}} \n\n %`
|
|
|
- },
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- color: '#49C3DF',
|
|
|
- fontSize: 50,
|
|
|
- lineHeight: 20,
|
|
|
- padding: [0, 0, 200, 0],
|
|
|
- },
|
|
|
- b: {
|
|
|
- color: '#49C3DF',
|
|
|
- height: 40,
|
|
|
- fontSize: 130,
|
|
|
- padding: [0, 0, 30, 0],
|
|
|
- fontWeight: 'bolder',
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- // name:'在线率',
|
|
|
- value: 86
|
|
|
- }]
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+ // mock数据
|
|
|
+ const mockData = {
|
|
|
+ value: 100,
|
|
|
+ name: '承诺率'
|
|
|
+ }
|
|
|
+ // 渐变色
|
|
|
+ var color = [
|
|
|
+ { offset: 0, color: 'rgba(0, 170, 255, 0.5)' },
|
|
|
+ { offset: 0.6, color: 'rgba(0, 170, 255, 0.6)' },
|
|
|
+ { offset: 0.95, color: 'rgba(0, 170, 255, 0.7)' },
|
|
|
+ { offset: 1, color: 'rgba(0, 170, 255, 0.9)' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 圆环宽度
|
|
|
+ const barMaxWidth = 10
|
|
|
+
|
|
|
+ // 坐标轴
|
|
|
+ const angleAxis = {
|
|
|
+ show: false,
|
|
|
+ max: 100 * 360 / 270,
|
|
|
+ type: 'value',
|
|
|
+ startAngle: 225,
|
|
|
+ splitLine: { show: false }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 坐标轴
|
|
|
+ const radiusAxis = {
|
|
|
+ show: false,
|
|
|
+ type: 'category',
|
|
|
+ }
|
|
|
+
|
|
|
+ //圆环位置和大小
|
|
|
+ const polar = {
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ radius: '175%'
|
|
|
+ }
|
|
|
+ const series = [{
|
|
|
+ type: 'bar',
|
|
|
+ data: [{
|
|
|
+ //上层圆环，显示数据
|
|
|
+ value: mockData.value,
|
|
|
+ itemStyle: {
|
|
|
+ color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: color, },
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+
|
|
|
+ formatter: params => {
|
|
|
+ return `{a|${params.value}}{b| %}\n\n\n{c|${mockData.name}}`
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ a: { fontSize: 18, verticalAlign: 'bottom' },
|
|
|
+ b: { fontSize: 16, verticalAlign: 'bottom' },
|
|
|
+ c: { fontSize: 14 }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#fff"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ barGap: '-100%',
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ roundCap: true,
|
|
|
+ z: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ data: [{
|
|
|
+ value: 100,
|
|
|
+ itemStyle: { color: 'rgba(0, 36, 109, 0.3)' }
|
|
|
+ }],
|
|
|
+ barGap: '-100%',
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ roundCap: true,
|
|
|
+ z: 1
|
|
|
+ }]
|
|
|
+ // 渲染
|
|
|
+ var option = { barMaxWidth, radiusAxis, polar, angleAxis, series};
|
|
|
+
|
|
|
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
sumyangyang