|
|
@@ -1520,291 +1520,291 @@ let app = new Vue({
|
|
|
// },
|
|
|
//这个是2d环图
|
|
|
initChartL1 () {
|
|
|
- var chartData = []
|
|
|
- var timer = null;
|
|
|
- var timer2 = null;
|
|
|
- var i = 0;
|
|
|
- industryList.forEach((item,index) => {
|
|
|
- let obj = {
|
|
|
- name: item.name,
|
|
|
- y: item.value,
|
|
|
- sliced: false,
|
|
|
- selected: false,
|
|
|
- color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
|
|
|
- }
|
|
|
- chartData.push(obj)
|
|
|
- })
|
|
|
- let that = this
|
|
|
- var chart = Highcharts.chart('echartR1', {
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 45,
|
|
|
- //beta: 0
|
|
|
- },
|
|
|
- events: {
|
|
|
- // load，图表加载完成时触发
|
|
|
- load: function () {
|
|
|
- var chart = this;
|
|
|
+ // var chartData = []
|
|
|
+ // var timer = null;
|
|
|
+ // var timer2 = null;
|
|
|
+ // var i = 0;
|
|
|
+ // industryList.forEach((item,index) => {
|
|
|
+ // let obj = {
|
|
|
+ // name: item.name,
|
|
|
+ // y: item.value,
|
|
|
+ // sliced: false,
|
|
|
+ // selected: false,
|
|
|
+ // color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
|
|
|
+ // }
|
|
|
+ // chartData.push(obj)
|
|
|
+ // })
|
|
|
+ // let that = this
|
|
|
+ // var chart = Highcharts.chart('echartR1', {
|
|
|
+ // chart: {
|
|
|
+ // type: 'pie',
|
|
|
+ // backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ // options3d: {
|
|
|
+ // enabled: true,
|
|
|
+ // alpha: 45,
|
|
|
+ // //beta: 0
|
|
|
+ // },
|
|
|
+ // events: {
|
|
|
+ // // load，图表加载完成时触发
|
|
|
+ // load: function () {
|
|
|
+ // var chart = this;
|
|
|
|
|
|
- var points = chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
-
|
|
|
- timer && clearInterval(timer);
|
|
|
- timer = setInterval(function () {
|
|
|
- autoTooltip(points[i]);
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- if(index == i){
|
|
|
- item.sliced = true
|
|
|
- item.selected = true
|
|
|
- }
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false //去掉hightchats水印
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- useHTML: true, //开启html模式
|
|
|
- style: {
|
|
|
- color:'#fff',
|
|
|
- },
|
|
|
- formatter: function(e){
|
|
|
- //console.log(this, e)
|
|
|
- this.percentage = Math.round(this.percentage)
|
|
|
- // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
|
|
|
- // e.options.style.color = '#fff'
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
|
|
|
- },
|
|
|
- //pointFormat:
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle:{
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true, // 图例
|
|
|
- cursor: 'pointer',
|
|
|
- size: 180,
|
|
|
- innerSize : 110, //环形图中间空白，0为饼图
|
|
|
- depth: 28, //立体高度
|
|
|
- slicedOffset: 23, //动画距离
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 是否展示指示线
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['35%','50%'],
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){ //点击事件
|
|
|
- //console.log(e)
|
|
|
- if (e.point.name == '战略新兴产业') {
|
|
|
- that.tipTitle2 = e.point.name
|
|
|
- that.showTip2 = true
|
|
|
- }
|
|
|
- },
|
|
|
- mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
- //console.log(e)
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chartData[e.target.index].sliced = true
|
|
|
- chartData[e.target.index].selected = true
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- timer && clearInterval(timer);
|
|
|
- },
|
|
|
- mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
- var points = chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
+ // var points = chart.series[0].points;
|
|
|
+ // var len = points.length;
|
|
|
|
|
|
- timer && clearInterval(timer);
|
|
|
- timer = setInterval(function () {
|
|
|
- autoTooltip(points[i]);
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- if(index == i){
|
|
|
- item.sliced = true
|
|
|
- item.selected = true
|
|
|
- }
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
-
|
|
|
- function autoTooltip(point) {
|
|
|
- chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
- // let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
- // let option = {
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'item',
|
|
|
- // //position: ['65%', '42%'],
|
|
|
- // position: (point,params,dom,rect,size) => {
|
|
|
- // if(params.name == '传统产业'){
|
|
|
- // return ['55%','25%']
|
|
|
- // } else if (params.name == '战略新兴产业') {
|
|
|
- // return ['55%','65%']
|
|
|
- // } else if (params.name == '基础产业') {
|
|
|
- // return ['18%','35%']
|
|
|
- // }
|
|
|
- // },
|
|
|
- // formatter: params => {
|
|
|
- // return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
|
|
|
- // }, //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
- // axisPointer: {
|
|
|
- // type: 'cross',
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // timer = setInterval(function () {
|
|
|
+ // autoTooltip(points[i]);
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // if(index == i){
|
|
|
+ // item.sliced = true
|
|
|
+ // item.selected = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // i++;
|
|
|
+ // if (i === len) {
|
|
|
+ // i = 0;
|
|
|
+ // }
|
|
|
+ // }, 2000);
|
|
|
// },
|
|
|
+ // legendItemClick : function(event) {
|
|
|
+ // console.log(event);
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // credits: {
|
|
|
+ // enabled: false //去掉hightchats水印
|
|
|
+ // },
|
|
|
+ // title: {
|
|
|
+ // text: null
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // crosshairs: true,
|
|
|
+ // backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ // useHTML: true, //开启html模式
|
|
|
+ // style: {
|
|
|
+ // color:'#fff',
|
|
|
// },
|
|
|
- // color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
|
|
|
- // legend: {
|
|
|
- // left: '2%',
|
|
|
- // bottom: '2%',
|
|
|
- // orient: 'vertical',
|
|
|
- // //right: '2%',
|
|
|
- // textStyle: {
|
|
|
- // color: '#9DB9EB',
|
|
|
- // },
|
|
|
+ // formatter: function(e){
|
|
|
+ // //console.log(this, e)
|
|
|
+ // this.percentage = Math.round(this.percentage)
|
|
|
+ // // e.options.backgroundColor = 'rgba(0,0,0,0.5)'
|
|
|
+ // // e.options.style.color = '#fff'
|
|
|
+ // return `${this.key}：<b>${this.percentage}%</b><br/>金额：<b>${this.y}</b>亿`
|
|
|
// },
|
|
|
- // series: [
|
|
|
-
|
|
|
- // // {
|
|
|
- // // hoverOffset: 0,
|
|
|
- // // startAngle: 90,
|
|
|
- // // type: "pie",
|
|
|
- // // radius: [48, 55],
|
|
|
- // // center: ["50%", "50%"],
|
|
|
- // // itemStyle: {
|
|
|
- // // normal: {
|
|
|
- // // borderColor: 'rgba(1,31,6,0.7)',
|
|
|
- // // borderWidth: 4
|
|
|
- // // }
|
|
|
- // // },
|
|
|
- // // tooltip: {
|
|
|
- // // show: false
|
|
|
- // // },
|
|
|
- // // labelLine: {
|
|
|
- // // show: false
|
|
|
- // // },
|
|
|
- // // label: {
|
|
|
- // // show: false
|
|
|
- // // },
|
|
|
- // // data: industryList
|
|
|
- // // },
|
|
|
- // {
|
|
|
- // name: '',
|
|
|
- // type: 'pie',
|
|
|
- // radius: ['50%', '75%'],
|
|
|
- // center: ["50%", "50%"],
|
|
|
- // label:{
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // borderColor: 'rgba(1,31,64,0.7)',
|
|
|
- // borderWidth: 6
|
|
|
- // }
|
|
|
- // },
|
|
|
- // labelLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // data: industryList,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // }
|
|
|
- // let that = this
|
|
|
- // myChart.on('click', function (param) {
|
|
|
- // if (param.name == '战略新兴产业') {
|
|
|
- // that.tipTitle2 = param.name
|
|
|
- // that.showTip2 = true
|
|
|
+ // //pointFormat:
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // layout: 'vertical',
|
|
|
+ // align: 'left',
|
|
|
+ // verticalAlign: 'bottom',
|
|
|
+ // itemStyle:{
|
|
|
+ // color: '#fff'
|
|
|
// }
|
|
|
+ // },
|
|
|
+ // plotOptions: {
|
|
|
+ // pie: {
|
|
|
+ // allowPointSelect: true,
|
|
|
+ // showInLegend: true, // 图例
|
|
|
+ // cursor: 'pointer',
|
|
|
+ // size: 180,
|
|
|
+ // innerSize : 110, //环形图中间空白，0为饼图
|
|
|
+ // depth: 28, //立体高度
|
|
|
+ // slicedOffset: 23, //动画距离
|
|
|
+ // dataLabels: {
|
|
|
+ // enabled: false, // 是否展示指示线
|
|
|
+ // format: '{point.name}: {point.percentage}'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // series: [{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // center: ['35%','50%'],
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){ //点击事件
|
|
|
+ // //console.log(e)
|
|
|
+ // if (e.point.name == '战略新兴产业') {
|
|
|
+ // that.tipTitle2 = e.point.name
|
|
|
+ // that.showTip2 = true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ // //console.log(e)
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // })
|
|
|
+ // chartData[e.target.index].sliced = true
|
|
|
+ // chartData[e.target.index].selected = true
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // },
|
|
|
+ // mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
+ // var points = chart.series[0].points;
|
|
|
+ // var len = points.length;
|
|
|
+
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // timer = setInterval(function () {
|
|
|
+ // autoTooltip(points[i]);
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // if(index == i){
|
|
|
+ // item.sliced = true
|
|
|
+ // item.selected = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // i++;
|
|
|
+ // if (i === len) {
|
|
|
+ // i = 0;
|
|
|
+ // }
|
|
|
+ // }, 2000);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // });
|
|
|
+
|
|
|
+ // function autoTooltip(point) {
|
|
|
+ // chart.tooltip.refresh(point);
|
|
|
+ // }
|
|
|
+ let myChart = echarts.init(this.$refs['echartR1'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ //position: ['65%', '42%'],
|
|
|
+ position: (point,params,dom,rect,size) => {
|
|
|
+ if(params.name == '传统产业'){
|
|
|
+ return ['55%','25%']
|
|
|
+ } else if (params.name == '战略新兴产业') {
|
|
|
+ return ['55%','65%']
|
|
|
+ } else if (params.name == '基础产业') {
|
|
|
+ return ['18%','35%']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter: params => {
|
|
|
+ return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
|
|
|
+ }, //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#6682f5', '#69c0ff', '#43ede3', '#8ba2ff'],
|
|
|
+ legend: {
|
|
|
+ left: '2%',
|
|
|
+ bottom: '2%',
|
|
|
+ orient: 'vertical',
|
|
|
+ //right: '2%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
|
|
|
- // })
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // nterval: 2000,
|
|
|
- // loopSeries: true,
|
|
|
- // })
|
|
|
+ // {
|
|
|
+ // hoverOffset: 0,
|
|
|
+ // startAngle: 90,
|
|
|
+ // type: "pie",
|
|
|
+ // radius: [48, 55],
|
|
|
+ // center: ["50%", "50%"],
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // borderColor: 'rgba(1,31,6,0.7)',
|
|
|
+ // borderWidth: 4
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // data: industryList
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '75%'],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label:{
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgba(1,31,64,0.7)',
|
|
|
+ borderWidth: 6
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: industryList,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ let that = this
|
|
|
+ myChart.on('click', function (param) {
|
|
|
+ if (param.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = param.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 2000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
},
|
|
|
initChartL2() {
|
|
|
let myChart = echarts.init(this.$refs['echartL2'])
|
|
|
@@ -2101,293 +2101,293 @@ let app = new Vue({
|
|
|
},
|
|
|
|
|
|
initChartR2() {
|
|
|
- var chartData = []
|
|
|
- var timer = null;
|
|
|
- var timer2 = null;
|
|
|
- var i = 0;
|
|
|
+ // var chartData = []
|
|
|
+ // var timer = null;
|
|
|
+ // var timer2 = null;
|
|
|
+ // var i = 0;
|
|
|
|
|
|
- chartDateR2.forEach((item,index) => {
|
|
|
- let obj = {
|
|
|
- name: item.name,
|
|
|
- y: item.value2,
|
|
|
- x: item.value,
|
|
|
- sliced: false,
|
|
|
- selected: false,
|
|
|
- color: index == 0 ? '#43ede3' : '#8ba2ff'
|
|
|
- }
|
|
|
- chartData.push(obj)
|
|
|
+ // chartDateR2.forEach((item,index) => {
|
|
|
+ // let obj = {
|
|
|
+ // name: item.name,
|
|
|
+ // y: item.value2,
|
|
|
+ // x: item.value,
|
|
|
+ // sliced: false,
|
|
|
+ // selected: false,
|
|
|
+ // color: index == 0 ? '#43ede3' : '#8ba2ff'
|
|
|
+ // }
|
|
|
+ // chartData.push(obj)
|
|
|
|
|
|
- })
|
|
|
- let that = this
|
|
|
- var chart = Highcharts.chart('echartR2', {
|
|
|
- chart: {
|
|
|
- type: 'pie',
|
|
|
- backgroundColor: 'rgba(0,0,0,0)',
|
|
|
- options3d: {
|
|
|
- enabled: true,
|
|
|
- alpha: 45,
|
|
|
- //beta: 0
|
|
|
- },
|
|
|
- events: {
|
|
|
- // load，图表加载完成时触发
|
|
|
- load: function () {
|
|
|
- var chart = this;
|
|
|
+ // })
|
|
|
+ // let that = this
|
|
|
+ // var chart = Highcharts.chart('echartR2', {
|
|
|
+ // chart: {
|
|
|
+ // type: 'pie',
|
|
|
+ // backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ // options3d: {
|
|
|
+ // enabled: true,
|
|
|
+ // alpha: 45,
|
|
|
+ // //beta: 0
|
|
|
+ // },
|
|
|
+ // events: {
|
|
|
+ // // load，图表加载完成时触发
|
|
|
+ // load: function () {
|
|
|
+ // var chart = this;
|
|
|
|
|
|
- var points = chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
+ // var points = chart.series[0].points;
|
|
|
+ // var len = points.length;
|
|
|
|
|
|
- timer && clearInterval(timer);
|
|
|
- timer = setInterval(function () {
|
|
|
- autoTooltip(points[i]);
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- if(index == i){
|
|
|
- item.sliced = true
|
|
|
- item.selected = true
|
|
|
- }
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- }
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
- legendItemClick : function(event) {
|
|
|
- console.log(event);
|
|
|
- return true;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- credits: {
|
|
|
- enabled: false //去掉hightchats水印
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- crosshairs: true,
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- // positioner: function(e){
|
|
|
- // console.log(e, this)
|
|
|
- // },
|
|
|
- useHTML: true, //开启html模式
|
|
|
- style: {
|
|
|
- color:'#fff',
|
|
|
- },
|
|
|
- formatter: function(e){
|
|
|
- //console.log(this)
|
|
|
- let num = chartData[this.colorIndex].x
|
|
|
- this.percentage = Math.round(this.percentage)
|
|
|
- return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
- },
|
|
|
- //pointFormat:
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'left',
|
|
|
- verticalAlign: 'bottom',
|
|
|
- itemStyle:{
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- pie: {
|
|
|
- allowPointSelect: true,
|
|
|
- showInLegend: true, // 图例
|
|
|
- cursor: 'pointer',
|
|
|
- size: 180,
|
|
|
- innerSize : 110, //环形图中间空白，0为饼图
|
|
|
- depth: 28, //立体高度
|
|
|
- slicedOffset: 23, //动画距离
|
|
|
- dataLabels: {
|
|
|
- enabled: false, // 是否展示指示线
|
|
|
- format: '{point.name}: {point.percentage}'
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- center: ['35%','50%'],
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){ //点击事件
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // timer = setInterval(function () {
|
|
|
+ // autoTooltip(points[i]);
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // if(index == i){
|
|
|
+ // item.sliced = true
|
|
|
+ // item.selected = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // i++;
|
|
|
+ // if (i === len) {
|
|
|
+ // i = 0;
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }, 2000);
|
|
|
+ // },
|
|
|
+ // legendItemClick : function(event) {
|
|
|
+ // console.log(event);
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // credits: {
|
|
|
+ // enabled: false //去掉hightchats水印
|
|
|
+ // },
|
|
|
+ // title: {
|
|
|
+ // text: null
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // crosshairs: true,
|
|
|
+ // backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
+ // // positioner: function(e){
|
|
|
+ // // console.log(e, this)
|
|
|
+ // // },
|
|
|
+ // useHTML: true, //开启html模式
|
|
|
+ // style: {
|
|
|
+ // color:'#fff',
|
|
|
+ // },
|
|
|
+ // formatter: function(e){
|
|
|
+ // //console.log(this)
|
|
|
+ // let num = chartData[this.colorIndex].x
|
|
|
+ // this.percentage = Math.round(this.percentage)
|
|
|
+ // return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
+ // },
|
|
|
+ // //pointFormat:
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // layout: 'vertical',
|
|
|
+ // align: 'left',
|
|
|
+ // verticalAlign: 'bottom',
|
|
|
+ // itemStyle:{
|
|
|
+ // color: '#fff'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // plotOptions: {
|
|
|
+ // pie: {
|
|
|
+ // allowPointSelect: true,
|
|
|
+ // showInLegend: true, // 图例
|
|
|
+ // cursor: 'pointer',
|
|
|
+ // size: 180,
|
|
|
+ // innerSize : 110, //环形图中间空白，0为饼图
|
|
|
+ // depth: 28, //立体高度
|
|
|
+ // slicedOffset: 23, //动画距离
|
|
|
+ // dataLabels: {
|
|
|
+ // enabled: false, // 是否展示指示线
|
|
|
+ // format: '{point.name}: {point.percentage}'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // series: [{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // center: ['35%','50%'],
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){ //点击事件
|
|
|
|
|
|
- },
|
|
|
- mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
- //console.log(e)
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chartData[e.target.index].sliced = true
|
|
|
- chartData[e.target.index].selected = true
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- timer && clearInterval(timer);
|
|
|
- },
|
|
|
- mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
- var points = chart.series[0].points;
|
|
|
- var len = points.length;
|
|
|
+ // },
|
|
|
+ // mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
|
|
|
+ // //console.log(e)
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // })
|
|
|
+ // chartData[e.target.index].sliced = true
|
|
|
+ // chartData[e.target.index].selected = true
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // },
|
|
|
+ // mouseOut: function(){ // 鼠标移出后需要继续执行轮播
|
|
|
+ // var points = chart.series[0].points;
|
|
|
+ // var len = points.length;
|
|
|
|
|
|
- timer && clearInterval(timer);
|
|
|
- timer = setInterval(function () {
|
|
|
- autoTooltip(points[i]);
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- if(index == i){
|
|
|
- item.sliced = true
|
|
|
- item.selected = true
|
|
|
- }
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
- i++;
|
|
|
- if (i === len) {
|
|
|
- i = 0;
|
|
|
- chartData.forEach((item,index) => {
|
|
|
- item.sliced = false
|
|
|
- item.selected = false
|
|
|
- })
|
|
|
- chart.update({
|
|
|
- series:[{
|
|
|
- type: 'pie',
|
|
|
- name: '占比',
|
|
|
- point: {
|
|
|
- events:{
|
|
|
- click:function(e){
|
|
|
- console.log(e)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- })
|
|
|
+ // timer && clearInterval(timer);
|
|
|
+ // timer = setInterval(function () {
|
|
|
+ // autoTooltip(points[i]);
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // if(index == i){
|
|
|
+ // item.sliced = true
|
|
|
+ // item.selected = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // i++;
|
|
|
+ // if (i === len) {
|
|
|
+ // i = 0;
|
|
|
+ // chartData.forEach((item,index) => {
|
|
|
+ // item.sliced = false
|
|
|
+ // item.selected = false
|
|
|
+ // })
|
|
|
+ // chart.update({
|
|
|
+ // series:[{
|
|
|
+ // type: 'pie',
|
|
|
+ // name: '占比',
|
|
|
+ // point: {
|
|
|
+ // events:{
|
|
|
+ // click:function(e){
|
|
|
+ // console.log(e)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // }, 2000);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: chartData
|
|
|
+ // }]
|
|
|
+ // });
|
|
|
+
|
|
|
+ // function autoTooltip(point) {
|
|
|
+ // chart.tooltip.refresh(point);
|
|
|
+ // }
|
|
|
+ let myChart = echarts.init(this.$refs['echartR2'])
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ position: (point,params,dom,rect,size) => {
|
|
|
+ if(params.name == '新建'){
|
|
|
+ return ['55%','45%']
|
|
|
+ } else {
|
|
|
+ return ['15%','40%']
|
|
|
}
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ formatter: params => {
|
|
|
+ return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
|
|
|
+ }, //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
},
|
|
|
- data: chartData
|
|
|
- }]
|
|
|
- });
|
|
|
-
|
|
|
- function autoTooltip(point) {
|
|
|
- chart.tooltip.refresh(point);
|
|
|
- }
|
|
|
- // let myChart = echarts.init(this.$refs['echartR2'])
|
|
|
- // let option = {
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'item',
|
|
|
- // position: (point,params,dom,rect,size) => {
|
|
|
- // if(params.name == '新建'){
|
|
|
- // return ['55%','45%']
|
|
|
- // } else {
|
|
|
- // return ['15%','40%']
|
|
|
- // }
|
|
|
- // },
|
|
|
- // formatter: params => {
|
|
|
- // return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
|
|
|
- // }, //+ '<br/>'+ '{a1}：{c1}' + '%',
|
|
|
- // axisPointer: {
|
|
|
- // type: 'cross',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // color: [ '#43ede3', '#8ba2ff'],
|
|
|
- // legend: {
|
|
|
- // left: '5%',
|
|
|
- // bottom: '2%',
|
|
|
- // orient: 'vertical',
|
|
|
- // //right: '2%',
|
|
|
- // textStyle: {
|
|
|
- // color: '#9DB9EB',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: '',
|
|
|
- // type: 'pie',
|
|
|
- // radius: ['50%', '75%'],
|
|
|
- // center: ["50%", "50%"],
|
|
|
- // label:{
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // borderColor: 'rgba(1,31,64,0.7)',
|
|
|
- // borderWidth: 6
|
|
|
- // }
|
|
|
- // },
|
|
|
- // labelLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // data: chartDateR2,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // }
|
|
|
- // myChart.setOption(option)
|
|
|
- // tools.loopShowTooltip(myChart, option, {
|
|
|
- // nterval: 10000,
|
|
|
- // loopSeries: true,
|
|
|
- // })
|
|
|
+ color: [ '#43ede3', '#8ba2ff'],
|
|
|
+ legend: {
|
|
|
+ left: '5%',
|
|
|
+ bottom: '2%',
|
|
|
+ orient: 'vertical',
|
|
|
+ //right: '2%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#9DB9EB',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '75%'],
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label:{
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgba(1,31,64,0.7)',
|
|
|
+ borderWidth: 6
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: chartDateR2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ myChart.setOption(option)
|
|
|
+ tools.loopShowTooltip(myChart, option, {
|
|
|
+ nterval: 10000,
|
|
|
+ loopSeries: true,
|
|
|
+ })
|
|
|
},
|
|
|
initProjectList() {
|
|
|
let dataList = []
|
unknown