说明

要求做立体感环形饼图

示例图

QQ截图20190530171959.png

HTML代码

  1. <div id="main" style="width: 50%;height:400px;margin: 0 auto;"></div>

JS代码

  1. <script src="js/jquery-1.6.2.min.js"></script>
  2. <script src="js/echarts.min.js"></script>
  3. <script>
  4.         $(function () {
  5.             pie("main");
  6.         });
  8.         /**
  9.          * @func
  10.          * @desc     立体感饼图函数
  11.          * @param {string} id - string |目标id
  12.          * 
  13.          */
  14.         function pie(id){
  15.             var myChart = echarts.init(document.getElementById(id));
  16.             var option = {
  17.         backgroundColor:"#041c3e",
  18.         tooltip: {
  19.           trigger: "item"
  20.         },
  21.         series: [
  22.           {
  23.             name: "",
  24.             type: "pie",
  25.             radius: ["38%","75%"],
  26.             z: 0,
  27.             zlevel: 0,
  28.             label: {normal: {show: true, position: "outside"} },
  29.             hoverAnimation:false,
  30.             itemStyle:{
  31.               emphasis:{
  32.                 opacity:.7
  33.               }
  34.             },
  35.             data: [
  36.               {value: 30, name: "燃气", itemStyle: {normal: {color: "#d93551"} } },
  37.               {value: 30, name: "风电", itemStyle: {normal: {color: "#12c4e7"} } },
  38.               {value: 30, name: "生物质", itemStyle: {normal: {color: "#f9a90f"} } },
  39.               {value: 30, name: "光伏", itemStyle: {normal: {color: "#ccfc15"} } },
  40.               {value: 30, name: "水电", itemStyle: {normal: {color: "#0ef40d"} } }
  41.             ]
  42.           },
  43.           {
  44.             name: "",
  45.             type: "pie",
  46.             radius: ["38%","75%"],
  47.             silent: true,
  48.             z: 0,
  49.             zlevel: 0,
  50.             label: {normal: {show: false, position: "center"} },
  51.             data: [
  52.               {value: 1, name: "", itemStyle: {normal: {
  53.                 color: {
  54.                   type: 'radial',
  55.                   x: 0.5,
  56.                   y: 0.5,
  57.                   r: 0.7,
  58.                   colorStops: [
  59.                     {offset: 0, color: 'transparent'},
  60.                     {offset: 0.379999, color: 'transparent'},
  61.                     {offset: 0.38, color: 'rgba(255,255,255,0.1)'},
  62.                     {offset: 0.55, color: 'rgba(255,255,255,0.5)'},
  63.                     {offset: 0.699999, color: 'rgba(255,255,255,0.1)'},
  64.                     {offset: 0.7, color: 'transparent'},
  65.                     {offset: 1, color: 'transparent'}
  66.                   ],
  67.                   globalCoord: false // 缺省为 false
  68.                 }
  69.               } } }
  70.             ]
  71.           }
  72.         ]
  73.       }
  74.             // 画图
  75.             myChart.setOption(option,true);
  76.             myChart.resize();
  77.         }
  78.         </script>

本文为原创文章，转载请附上原文链接！