|
|
@@ -0,0 +1,284 @@
|
|
|
+<template>
|
|
|
+ <div id="myChartindex6" style="width: 100%; height: 100%;"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { fourquan } from '../../api'
|
|
|
+
|
|
|
+ import 'echarts-liquidfill'
|
|
|
+ export default {
|
|
|
+ name: "OperationAnalysisCount",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data1: { label: '巡访平均周期', value: '3.5天' },
|
|
|
+ data2: { label: '子女绑定占比', value: '60%' },
|
|
|
+ data3: { label: '积分存量', value: 123156 },
|
|
|
+ data4: { label: '兑换比例', value: '60%' },
|
|
|
+ colorArr: [
|
|
|
+ { color1: '#ff8d00', color2: '#FFF43F' },
|
|
|
+ { color1: '#5fff06', color2: '#B4FF9F' },
|
|
|
+ { color1: '#60b8db', color2: '#afd3ff' },
|
|
|
+ { color1: '#ff00e8', color2: '#f48fff' }
|
|
|
+ ],
|
|
|
+ myChart: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handlerData(val) {
|
|
|
+ const length = String(parseInt(val)).length;
|
|
|
+ let r = 1;
|
|
|
+ if(length != 0) {
|
|
|
+ r = r + new Array(length).fill(0).join('');
|
|
|
+ }
|
|
|
+ return (parseInt(val) / parseInt(r)).toFixed(2);
|
|
|
+ },
|
|
|
+ createLiquidfill(obj) {
|
|
|
+ return {
|
|
|
+ type: 'liquidFill',
|
|
|
+ data: [obj.value],
|
|
|
+ radius: '60%',
|
|
|
+ center: [`${obj.center_x}%`, `${obj.center_y}%`],
|
|
|
+ outline: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ backgroundStyle: {
|
|
|
+ borderWidth: 0,
|
|
|
+ color: "transparent"
|
|
|
+ },
|
|
|
+ waveAnimation: false, // 禁止左右波动
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: ['50%', '53%'],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: this.fontSize(0.25),
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ formatter: `${ obj.text }`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1,
|
|
|
+ [
|
|
|
+ {offset: 0, color: this.colorArr[obj.index].color1},
|
|
|
+ {offset: 1, color: this.colorArr[obj.index].color2}
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ createCircleImage(){
|
|
|
+
|
|
|
+ },
|
|
|
+ async draw() {
|
|
|
+ const result = await fourquan({}, 'POST');
|
|
|
+ this.data1 = result.data1;
|
|
|
+ this.data2 = result.data2;
|
|
|
+ this.data3 = result.data3;
|
|
|
+ this.data4 = result.data4;
|
|
|
+
|
|
|
+ const seriesArr = [];
|
|
|
+
|
|
|
+ // const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 46, center_y: 55, text: this.data2.value, value: this.handlerData(this.data2.value) });
|
|
|
+ // seriesArr.push(liquidFill1);
|
|
|
+
|
|
|
+ const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 46, center_y: 50, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
|
|
|
+ seriesArr.push(liquidFill2);
|
|
|
+ //
|
|
|
+ // const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 16, center_y: 78, text: this.data3.value, value: this.handlerData(this.data3.value) });
|
|
|
+ // seriesArr.push(liquidFill3);
|
|
|
+ //
|
|
|
+ // const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 66, center_y: 78, text: this.data4.value, value: this.handlerData(this.data4.value) });
|
|
|
+ // seriesArr.push(liquidFill4);
|
|
|
+
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
|
|
|
+ // symbolSize: [40, 40],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, -100] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [-45, -90],
|
|
|
+ // color: '#fff',
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: '巡访平均周期'
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
|
|
|
+ // symbolSize: [62, 5],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, -60] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [-60, -55],
|
|
|
+ // color: this.colorArr[0].color1,
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: this.data1.value
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
|
|
|
+ // symbolSize: [102, 102],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [160, -90],
|
|
|
+ // color: '#fff',
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: '子女绑定占比'
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
|
|
|
+ // symbolSize: [62, 5],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [150, -55],
|
|
|
+ // color: this.colorArr[1].color1,
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: `${this.data2.value}%`
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
|
|
|
+ // symbolSize: [102, 102],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [20, 30] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [-60, 40],
|
|
|
+ //
|
|
|
+ // color: '#fff',
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: '积分存量'
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
|
|
|
+ // symbolSize: [62, 5],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [130, 70] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [-60, 75],
|
|
|
+ // color: this.colorArr[2].color1,
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: `${this.data3.value}`
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
|
|
|
+ // symbolSize: [102, 102],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [150, 40],
|
|
|
+ // color: '#fff',
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: '兑换比例'
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+ //
|
|
|
+ // seriesArr.push({
|
|
|
+ // type: 'pictorialBar',
|
|
|
+ // symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
|
|
|
+ // symbolSize: [62, 5],
|
|
|
+ // data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // offset: [150, 80],
|
|
|
+ // color: this.colorArr[3].color1,
|
|
|
+ // fontSize: 16,
|
|
|
+ // formatter: `${this.data4.value}`
|
|
|
+ // },
|
|
|
+ // z: 2
|
|
|
+ // });
|
|
|
+
|
|
|
+ if(this.myChart != null) {
|
|
|
+ this.myChart.clear();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.myChart = this.$echarts.init(document.getElementById('myChartindex6'));
|
|
|
+ this.myChart.setOption({
|
|
|
+ grid:{
|
|
|
+ left:"2%"
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ max: 100,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: seriesArr
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fontSize(res) {
|
|
|
+ let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
|
|
+ if (!clientWidth) return;
|
|
|
+ let fontSize = 100 * (clientWidth / 1920);
|
|
|
+ return res * fontSize;
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.draw();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
