|
|
@@ -0,0 +1,272 @@
|
|
|
+<template>
|
|
|
+ <div id="XZQHPieChart" ref="XZQHPieChart">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ init_echart() {
|
|
|
+ var myChart = echarts.init(this.$refs.XZQHPieChart);
|
|
|
+ var scale = 1;
|
|
|
+ function _pie2() {
|
|
|
+ let dataArr = [];
|
|
|
+ for (var i = 0; i < 4; i++) {
|
|
|
+ if (i % 2 === 0) {
|
|
|
+ dataArr.push({
|
|
|
+ name: (i + 1).toString(),
|
|
|
+ value: 25,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ // color: 'rgba(88,142,197,0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ dataArr.push({
|
|
|
+ name: (i + 1).toString(),
|
|
|
+ value: 20,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return dataArr;
|
|
|
+ }
|
|
|
+ var echartData = [{
|
|
|
+ value: 2154,
|
|
|
+ name: '正常使用',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#E58B44'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3854,
|
|
|
+ name: '剩余1个月',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#D95CFF'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, {
|
|
|
+ value: 3515,
|
|
|
+ name: '已到期',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {//颜色渐变
|
|
|
+ // color: new echarts.graphic.LinearGradient(
|
|
|
+ // 0, 0, 0, 1,
|
|
|
+ // [
|
|
|
+ // {offset: 0, color: '#06A3F4'},
|
|
|
+ // {offset: 1, color: 'transparent'}
|
|
|
+ // ]
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }, ]
|
|
|
+ var total_datas = 0;
|
|
|
+ for (var i = 0; i < echartData.length; i++) {
|
|
|
+ total_datas += echartData[i].value
|
|
|
+ }
|
|
|
+
|
|
|
+ var rich = {
|
|
|
+ yellow: {
|
|
|
+ color: "#ffc72b",
|
|
|
+ fontSize: 12 * scale,
|
|
|
+ // padding: [21, 0],
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ total: {
|
|
|
+ color: "#ffc72b",
|
|
|
+ fontSize: 40 * scale,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+
|
|
|
+ blue: {
|
|
|
+ color: '#49dff0',
|
|
|
+ fontSize: 10 * scale,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ hr: {
|
|
|
+ borderColor: '#0b5263',
|
|
|
+ width: '100%',
|
|
|
+ borderWidth: 1,
|
|
|
+ height: 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ subtext: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#f2f2f2',
|
|
|
+ fontSize: 40,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ fontSize: 30,
|
|
|
+ color: ['#ff9d19']
|
|
|
+ },
|
|
|
+ x: 'center',
|
|
|
+ y: 'center',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
|
|
|
+ orient: 'vertical',
|
|
|
+ // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
|
|
|
+ x: 'left',
|
|
|
+ // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
|
|
|
+ y: 'center',
|
|
|
+ itemWidth: 24, // 设置图例图形的宽
|
|
|
+ itemHeight: 18, // 设置图例图形的高
|
|
|
+ textStyle: {
|
|
|
+ color: '#666' // 图例文字颜色
|
|
|
+ },
|
|
|
+ // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
|
|
|
+ itemGap: 30,
|
|
|
+ data: ['居民用地', '公共管理用地', '商服用地', '工业工业', '交通运输用地', '商业用地']
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: '总考生数量',
|
|
|
+ type: 'pie',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: "#5ecef09a"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radius: ['38%', '50%'],
|
|
|
+ hoverAnimation: false,
|
|
|
+ color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: function (params, ticket, callback) {
|
|
|
+ var total = 0; //考生总数量
|
|
|
+ var percent = 0; //考生占比
|
|
|
+ echartData.forEach(function (value, index, array) {
|
|
|
+ total += value.value;
|
|
|
+ });
|
|
|
+ percent = ((params.value / total) * 100).toFixed(1);
|
|
|
+ return '{yellow|' + params.name + '}\n{blue|' + percent + '%}';
|
|
|
+ },
|
|
|
+ rich: rich
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // labelLine: {
|
|
|
+ // normal: {
|
|
|
+ // length: 55 * scale,
|
|
|
+ // length2: 10,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#0b5263'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ data: echartData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ zlevel: 2,
|
|
|
+ silent: true,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: ['58%', '55%'],
|
|
|
+ startAngle: 50,
|
|
|
+ hoverAnimation: false,
|
|
|
+ color: [{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(234, 40, 125, 1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(234, 40, 125, 0.01)'
|
|
|
+ }],
|
|
|
+ global: false
|
|
|
+ }],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: _pie2(),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['35%', '36%'],
|
|
|
+ data: [100],
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: '#121F22',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ created() { }, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ mounted() {
|
|
|
+ const that = this;
|
|
|
+ this.$nextTick((res) => {
|
|
|
+ this.init_echart();
|
|
|
+
|
|
|
+ })
|
|
|
+ }, //生命周期 - 挂在完成
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroy() { },//生命周期 - 销毁完成
|
|
|
+ activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
+ deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+#XZQHPieChart {
|
|
|
+ width: 20vw;
|
|
|
+ height: 11rem;
|
|
|
+}
|
|
|
+</style>
|
zpf