|
|
@@ -1520,291 +1520,301 @@ 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;
|
|
|
+ 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;
|
|
|
-
|
|
|
- // 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){
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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){
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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){
|
|
|
+ if (e.point.name == '战略新兴产业') {
|
|
|
+ that.tipTitle2 = e.point.name
|
|
|
+ that.showTip2 = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ i++;
|
|
|
+ if (i === len) {
|
|
|
+ i = 0;
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: chartData
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ function autoTooltip(point) {
|
|
|
+ chart.tooltip.refresh(point);
|
|
|
+ }
|
|
|
|
|
|
- })
|
|
|
- myChart.setOption(option)
|
|
|
- tools.loopShowTooltip(myChart, option, {
|
|
|
- nterval: 2000,
|
|
|
- loopSeries: true,
|
|
|
- })
|
|
|
+ // 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: [
|
|
|
+
|
|
|
+ // // {
|
|
|
+ // // 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 +2111,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,
|
|
|
+ num: 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){ //点击事件
|
|
|
-
|
|
|
- // },
|
|
|
- // 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
|
|
|
- // }]
|
|
|
- // })
|
|
|
- // }
|
|
|
- // }, 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%']
|
|
|
- }
|
|
|
- },
|
|
|
- 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',
|
|
|
+ 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',
|
|
|
},
|
|
|
- color: [ '#43ede3', '#8ba2ff'],
|
|
|
- legend: {
|
|
|
- left: '5%',
|
|
|
- bottom: '2%',
|
|
|
- orient: 'vertical',
|
|
|
- //right: '2%',
|
|
|
- textStyle: {
|
|
|
- color: '#9DB9EB',
|
|
|
- },
|
|
|
+ formatter: function(e){
|
|
|
+ //console.log(this)
|
|
|
+ let num = chartData[this.colorIndex].num
|
|
|
+ this.percentage = Math.round(this.percentage)
|
|
|
+ return `${this.key}：<b>${this.percentage}%</b><br/>投资完成额：<b>${this.y}</b>亿<br/>投资数量：<b>${num}个</b>`
|
|
|
},
|
|
|
- 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,
|
|
|
- })
|
|
|
+ //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;
|
|
|
+
|
|
|
+ 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%']
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // 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,
|
|
|
+ // })
|
|
|
},
|
|
|
initProjectList() {
|
|
|
let dataList = []
|
unknown