Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

3D饼图demo修改

unknown 1 year ago
parent
5b02a03732
commit
7916893c3a
2 changed files with 386 additions and 7 deletions
Unified View Show Diff Stats
  1. 309 0
      investment/demo.html
  2. 77 7
      investment/js/copyHome.js

+ 309 - 0
investment/demo.html
View File 

@@ -0,0 +1,309 @@
 
+<!DOCTYPE html>
 
+
 
+<html>
 
+<head>
 
+<meta charset="utf-8" />
 
+<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico" />
 
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
+
 
+<style>
 
+
 
+/* css 代码 */
 
+
 
+</style>
 
+    <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
+  <script src="./libs/echarts.min2.js"></script>
 
+  <script src="./libs/echarts-gl.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./js/data.js"></script>
 
+  <script src="./libs/vue-seamless-scroll.min.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+  <!-- highchair -->
 
+  <script src="./libs/highcharts.js"></script>
 
+  <script src="./libs/highcharts3d.js"></script> 
+</head>
 
+
 
+<body>
 
+    <div id="app" class="big-box">
 
+        <div class="com-container" ref="container" style="width:380px;height:300px;">
 
+        </div>
 
+        <div class="tulibox">
 
+          <div v-for="(item,index) in peiData" :key="index" class="tuliboxitem">
 
+            <span class="name">{{item.name}}</span>   <span class="value">{{item.y}}%</span>
 
+          </div>
 
+        </div>
 
+    </div>
 
+<script>
 
+console.log(Highcharts)
 
+var highcharts = Highcharts
 
+let app = new Vue({
 
+    el: '#app',
 
+    data () {
 
+    return {
 
+      peiData: [
 
+        { name: '输电', y: 28, h: 60 },
 
+        { name: '变电', y: 20, h: 20 },
 
+        { name: '配电', y: 10, h: 32 },
 
+        { name: '新业务', y: 6, h: 45 }
 
+      ],
 
+      each:'',
 
+      wrap: '',
 
+      prototype: '',
 
+    }
 
+  },
 
+  mounted () {
 
+    this.each = highcharts.each
 
+    this.wrap = highcharts
 
+    this.prototype = highcharts.seriesTypes.pie.prototype
 
+    this.initChart()
 
+    const that = this
 
+    window.onresize = function () { that.initChart() }
 
+   
+  },
 
+  methods: {
 
+    initChart () {
 
+      // 修改3d饼图绘制过程
 
+      
+      const round = Math.round
 
+      const cos = Math.cos
 
+      const sin = Math.sin
 
+      const deg2rad = Math.deg2rad
 
+      let that = this
 
+      highcharts.wrap(this.prototype, 'translate', function (proceed) {
 
+        proceed.apply(this, [].slice.call(arguments, 1))
 
+        // Do not do this if the chart is not 3D
 
+        if (!this.chart.is3d()) {
 
+          return
 
+        }
 
+        const series = this
 
+        const chart = series.chart
 
+        const options = chart.options
 
+        const seriesOptions = series.options
 
+        const depth = seriesOptions.depth || 0
 
+        const options3d = options.chart.options3d
 
+        const alpha = options3d.alpha
 
+        const beta = options3d.beta
 
+        var z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth
 
+        z += depth / 2
 
+        if (seriesOptions.grouping !== false) {
 
+          z = 0
 
+        }
 
+        that.each(series.data, function (point) {
 
+          const shapeArgs = point.shapeArgs
 
+          var angle
 
+          point.shapeType = 'arc3d'
 
+          var ran = point.options.h
 
+          shapeArgs.z = z
 
+          shapeArgs.depth = depth * 0.75 + ran
 
+          shapeArgs.alpha = alpha
 
+          shapeArgs.beta = beta
 
+          shapeArgs.center = series.center
 
+          shapeArgs.ran = ran
 
+          angle = (shapeArgs.end + shapeArgs.start) / 2
 
+          point.slicedTranslation = {
 
+            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
 
+            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
 
+          }
 
+        })
 
+      });
 
+      (function (H) {
 
+        H.wrap(highcharts.SVGRenderer.prototype, 'arc3dPath', function (proceed) {
 
+        // Run original proceed method
 
+          const ret = proceed.apply(this, [].slice.call(arguments, 1))
 
+          ret.zTop = (ret.zOut + 0.5) / 100
 
+          return ret
 
+        })
 
+      }(highcharts))
 
+      // 生成不同高度的3d饼图
 
+      const high = this.$refs.container
 
+      highcharts.chart(high, {
 
+        chart: {
 
+          type: 'pie',
 
+          animation: false,
 
+          backgroundColor: 'rgba(0,0,0,0)',
 
+ 
+          events: {
 
+            load: function () {
 
+              
+              const points = this.series[0].points
 
+              that.each(points, function (p, i) {
 
+                p.graphic.attr({
 
+                  translateY: -p.shapeArgs.ran
 
+                })
 
+                p.graphic.side1.attr({
 
+                  translateY: -p.shapeArgs.ran
 
+                })
 
+                p.graphic.side2.attr({
 
+                  translateY: -p.shapeArgs.ran
 
+                })
 
+              })
 
+            }
 
+          },
 
+          options3d: {
 
+            enabled: true,
 
+            alpha: 65
 
+          }
 
+        },
 
+        title: {
 
+          show: 'false',
 
+          text: null
 
+        },
 
+        subtitle: {
 
+          text: null
 
+        },
 
+        credits: {
 
+          enabled: false
 
+        },
 
+        legend: { // 【图例】位置样式
 
+          backgroundColor: 'rgba(0,0,0,0)',
 
+          shadow: false,
 
+          layout: 'vertical',
 
+          align: 'right', // 水平方向位置
 
+          verticalAlign: 'top', // 垂直方向位置
 
+          x: 0, // 距离x轴的距离
 
+          y: 100, // 距离Y轴的距离
 
+          symbolPadding: 10,
 
+          symbolHeight: 14,
 
+          itemStyle: {
 
+            lineHeight: '24px',
 
+            fontSize: '16px',
 
+            color: '#fff'
 
+          },
 
+          labelFormatter: function () {
 
+            /*
 
+            *  格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
 
+            *  this 代表当前数据列对象，所以默认的实现是 return this.name
 
+            */
 
+            return this.name + this.h + '%'
 
+          }
 
+        },
 
+        plotOptions: {
 
+          pie: {
 
+            allowPointSelect: true,
 
+            cursor: 'pointer',
 
+            depth: 35,
 
+            innerSize: 180,
 
+            dataLabels: {
 
+              enabled: false
 
+            },
 
+            // 显示图例
 
+            showInLegend: false
 
+          }
 
+        },
 
+        series: [{
 
+          type: 'pie',
 
+          name: '占比',
 
+          // h 是高度  y是占的圆环长度
 
+          colorByPoint: true,
 
+          colors: [
 
+            { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
 
+              linearGradient: {
 
+                x1: 0,
 
+                y1: 1,
 
+                x2: 1,
 
+                y2: 0
 
+              },
 
+              stops: [
 
+                [0, '#19596d'],
 
+                [1, '#2ea1b2']
 
+              ]
 
+            }, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
 
+              linearGradient: {
 
+                x1: 0,
 
+                y1: 1,
 
+                x2: 1,
 
+                y2: 0
 
+              },
 
+              stops: [
 
+                [0, '#ee7529'],
 
+                [1, '#f5a86c']
 
+              ]
 
+            }, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
 
+              linearGradient: {
 
+                x1: 0,
 
+                y1: 1,
 
+                x2: 1,
 
+                y2: 0
 
+              },
 
+              stops: [
 
+                [0, '#f5c055'],
 
+                [1, '#967b3d']
 
+              ]
 
+            }, { // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
 
+              linearGradient: {
 
+                x1: 0,
 
+                y1: 1,
 
+                x2: 1,
 
+                y2: 0
 
+              },
 
+              stops: [
 
+                [0, '#2d7bb5'],
 
+                [1, '#1a5784']
 
+              ]
 
+            }],
 
+          data: this.peiData
 
+        }]
 
+      })
 
+    }
 
+  },
 
+})
 
+</script>
 
+
 
+</body>
 
+
 
+<style scoped lang="less">
 
+    .com-container{
 
+        width: 380px;
 
+        height: 300px;
 
+        padding-right: 20px;
 
+    }
 
+    .big-box{
 
+        display: flex;
 
+        background-image: url('../img/dizuo.png');
 
+        background-repeat: no-repeat;
 
+        background-position: 25px 144px;
 
+        padding-top: 20px;
 
+    }
 
+    .tulibox{
 
+      padding-top: 65px;
 
+    }
 
+    .tuliboxitem{
 
+        position: relative;
 
+        margin: 10px 0;
 
+      }
 
+      .name{
 
+          font-size: 18px;
 
+          color: #FEFEFF;
 
+          padding-right: 20px;
 
+        }
 
+        .value{
 
+          font-size: 22px;
 
+          color: #0CD2EA;
 
+        }
 
+      .tuliboxitem::before{
 
+         content: "";
 
+         position: absolute;
 
+         width: 16px;
 
+        height: 16px;
 
+        top: 7px;
 
+        border-radius: 50%;
 
+        left: -33px;
 
+      }
 
+      .tuliboxitem:nth-child(1)::before{
 
+          background-color: #fff600;
 
+      }
 
+      .tuliboxitem:nth-child(2)::before{
 
+          background-color: #209FED;
 
+      }
 
+      .tuliboxitem:nth-child(3)::before{
 
+          background-color: #808EC7;
 
+      }
 
+      .tuliboxitem:nth-child(4)::before{
 
+          background-color: #EE6B26;
 
+      }
 
+    </style>
 
+
 
+</html>

+ 77 - 7
investment/js/copyHome.js
View File 

@@ -1523,47 +1523,94 @@ let app = new Vue({
 
       var chartData = []
 
       var chartData = []
 
       var timer = null;
 
       var timer = null;
 
       var timer2 = null;
 
       var timer2 = null;
 
+      var sumAngleData = 0;
 
       var i = 0;
 
       var i = 0;
 
       industryList.forEach((item,index) => {
 
       industryList.forEach((item,index) => {
 
         let obj = {
 
         let obj = {
 
           name: item.name,
 
           name: item.name,
 
           y: item.value,
 
           y: item.value,
 
+          h: 28,
 
           sliced: false,
 
           sliced: false,
 
           selected: false,
 
           selected: false,
 
           color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
 
           color: index == 0 ? 'rgb(243,178,119)' : index == 1 ? 'rgb(110,222,191)' : 'rgb(82,161,229)'
 
         }
 
         }
 
         chartData.push(obj)
 
         chartData.push(obj)
 
+        sumAngleData = sumAngleData + item.value 
+       
       })
 
       })
 
-      let that = this
 
+      // 这个方法用于计算当前块的最中间角度
 
+      var chartAngle =  function(n){
 
+        return chartData[n].y / sumAngleData * 100 * 1.8
 
+      }  
+      var angleData = 180 - chartAngle(0);  //先计算出第一个位于最中间的角度
 
+
 
+      let each = Highcharts.each
 
+      let that = this 
       var chart = Highcharts.chart('echartR1', {
 
       var chart = Highcharts.chart('echartR1', {
 
         chart: {
 
         chart: {
 
           type: 'pie',
 
           type: 'pie',
 
           backgroundColor: 'rgba(0,0,0,0)',
 
           backgroundColor: 'rgba(0,0,0,0)',
 
           options3d: {
 
           options3d: {
 
             enabled: true,
 
             enabled: true,
 
-            alpha: 45,
 
-            //beta: 0
 
+            alpha: 55,
 
+            //beta: 100
 
+            depth: 28,
 
           },
 
           },
 
           events: {
 
           events: {
 
             // load，图表加载完成时触发
 
             // load，图表加载完成时触发
 
             load: function () {
 
             load: function () {
 
               var chart = this;
 
               var chart = this;
 
-  
+              var angle = 0;
 
               var points = chart.series[0].points;
 
               var points = chart.series[0].points;
 
               var len = points.length;
 
               var len = points.length;
 
-             
+    
+              // each(points, function (p, i) {
 
+              //   p.graphic.attr({
 
+              //     translateY: -p.shapeArgs.ran
 
+              //   })
 
+              //   p.graphic.side1.attr({
 
+              //     translateY: -p.shapeArgs.ran
 
+              //   })
 
+              //   p.graphic.side2.attr({
 
+              //     translateY: -p.shapeArgs.ran
 
+              //   })
 
+              // })
 
+              each(points, function (p, i) {
 
+                var shapeArgs = p.shapeArgs
 
+                console.log(shapeArgs)
 
+              })
 
+
 
               timer && clearInterval(timer);
 
               timer && clearInterval(timer);
 
               timer = setInterval(function () {
 
               timer = setInterval(function () {
 
                 autoTooltip(points[i]);
 
                 autoTooltip(points[i]);
 
+               
                 chartData.forEach((item,index) => {
 
                 chartData.forEach((item,index) => {
 
                   item.sliced = false
 
                   item.sliced = false
 
                   item.selected = false
 
                   item.selected = false
 
+                  item.h = 28
 
                   if(index == i){
 
                   if(index == i){
 
                     item.sliced = true
 
                     item.sliced = true
 
                     item.selected = true
 
                     item.selected = true
 
+                    item.h = 48
 
                   }
 
                   }
 
                 })
 
                 })
 
                 chart.update({
 
                 chart.update({
 
+                  plotOptions: {
 
+                    pie: {
 
+                      allowPointSelect: true,
 
+                      showInLegend:  true, // 图例
 
+                      cursor: 'pointer',
 
+                      size: 180,
 
+                      innerSize : 110, //环形图中间空白，0为饼图
 
+                      depth: 28, //立体高度
 
+                      slicedOffset: 23, //动画距离
 
+                      startAngle: angleData,  // 旋转角度
 
+                      dataLabels: {
 
+                        enabled: false,  // 是否展示指示线
 
+                        format: '{point.name}: {point.percentage}'
 
+                      }
 
+                    },
 
+                  },
 
                   series:[{
 
                   series:[{
 
                     type: 'pie',
 
                     type: 'pie',
 
                     name: '占比',
 
                     name: '占比',
 
@@ -1581,10 +1628,15 @@ let app = new Vue({
 
                   }]
 
                   }]
 
                 })
 
                 })
 
                 i++;
 
                 i++;
 
+                
                 if (i === len) {
 
                 if (i === len) {
 
                   i = 0;
 
                   i = 0;
 
                 }
 
                 }
 
+                // 开始计算上一个旋转块的角度
 
+                let previous = i-1 < 0 ? len-1 : i-1 //这里计算上一块是第几块
 
+                angleData =angleData- (chartAngle(i) +  chartAngle(previous))
 
               }, 2000);
 
               }, 2000);
 
+             
             },
 
             },
 
             legendItemClick : function(event) {
 
             legendItemClick : function(event) {
 
               console.log(event);
 
               console.log(event);
 
@@ -1631,6 +1683,7 @@ let app = new Vue({
 
             innerSize : 110, //环形图中间空白，0为饼图
 
             innerSize : 110, //环形图中间空白，0为饼图
 
             depth: 28, //立体高度
 
             depth: 28, //立体高度
 
             slicedOffset: 23, //动画距离
 
             slicedOffset: 23, //动画距离
 
+            startAngle: angleData,  // 旋转角度
 
             dataLabels: {
 
             dataLabels: {
 
               enabled: false,  // 是否展示指示线
 
               enabled: false,  // 是否展示指示线
 
               format: '{point.name}: {point.percentage}'
 
               format: '{point.name}: {point.percentage}'
 
@@ -1652,6 +1705,7 @@ let app = new Vue({
 
                   },
 
                   },
 
                   mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
 
                   mouseOver: function(e){ //鼠标移入停止轮播并且找到移入的当前数据设为选中
 
                     //console.log(e) 
                     //console.log(e) 
+                    var angle = 45
 
                     chartData.forEach((item,index) => {
 
                     chartData.forEach((item,index) => {
 
                       item.sliced = false
 
                       item.sliced = false
 
                       item.selected = false
 
                       item.selected = false
 
@@ -1680,7 +1734,6 @@ let app = new Vue({
 
                   mouseOut: function(){ // 鼠标移出后需要继续执行轮播
 
                   mouseOut: function(){ // 鼠标移出后需要继续执行轮播
 
                   var points = chart.series[0].points;
 
                   var points = chart.series[0].points;
 
                   var len = points.length;
 
                   var len = points.length;
 
-             
                   timer && clearInterval(timer);
 
                   timer && clearInterval(timer);
 
                   timer = setInterval(function () {
 
                   timer = setInterval(function () {
 
                     autoTooltip(points[i]);
 
                     autoTooltip(points[i]);
 
@@ -1693,6 +1746,22 @@ let app = new Vue({
 
                       }
 
                       }
 
                     })
 
                     })
 
                     chart.update({
 
                     chart.update({
 
+                      plotOptions: {
 
+                        pie: {
 
+                          allowPointSelect: true,
 
+                          showInLegend:  true, // 图例
 
+                          cursor: 'pointer',
 
+                          size: 180,
 
+                          innerSize : 110, //环形图中间空白，0为饼图
 
+                          depth: 28, //立体高度
 
+                          slicedOffset: 23, //动画距离
 
+                          startAngle: angleData,  // 旋转角度
 
+                          dataLabels: {
 
+                            enabled: false,  // 是否展示指示线
 
+                            format: '{point.name}: {point.percentage}'
 
+                          }
 
+                        },
 
+                      },
 
                       series:[{
 
                       series:[{
 
                         type: 'pie',
 
                         type: 'pie',
 
                         name: '占比',
 
                         name: '占比',
 
@@ -1713,6 +1782,8 @@ let app = new Vue({
 
                     if (i === len) {
 
                     if (i === len) {
 
                       i = 0;
 
                       i = 0;
 
                     }
 
                     }
 
+                    let previous = i-1 < 0 ? len-1 : i-1 //这里计算上一块是第几块
 
+                    angleData =angleData- (chartAngle(i) +  chartAngle(previous))
 
                   }, 2000);                
                   }, 2000);                
                  }
 
                  }
 
               }
 
               }
 
@@ -2145,7 +2216,6 @@ let app = new Vue({
 
   
   
               var points = chart.series[0].points;
 
               var points = chart.series[0].points;
 
               var len = points.length;
 
               var len = points.length;
 
-             
               timer && clearInterval(timer);
 
               timer && clearInterval(timer);
 
               timer = setInterval(function () {
 
               timer = setInterval(function () {
 
                 autoTooltip(points[i]);
 
                 autoTooltip(points[i]);