注释

echarts-screen/src/components/PieCon.vue

@@ -27,6 +27,7 @@ export default {
   methods: {
     getEchartLeft2() {
       let myChart = echarts.init(document.getElementById('chart_left2'));
+      //数据
       let scaleData = [{
         name: '本地新增',
         value: 9
@@ -55,16 +56,22 @@ export default {
         }
       };
       let data = [];
+      //饼图颜色
       let color=['#006ced', '#ff3000']
       for (let i = 0; i < scaleData.length; i++) {
         data.push({
           value: scaleData[i].value,
           name: scaleData[i].name,
+          //阴影的配置 阴影、透明度、颜色、边框颜色、边框宽度等
           itemStyle: {
             normal: {
+              //文本块或文本片段的边框
               borderWidth: 6,
+              //文本块或文本片段的阴影
               shadowBlur: 10,
+              //文本块或文本片段的边框、背景颜色
               borderColor: color[i],
+              //文本块或文本片段的阴影
               shadowColor: color[i]
             }
           }
@@ -76,6 +83,7 @@ export default {
       }
 
       let option = {
+        //工具栏
         toolbox: {
           feature: {
             mytool: {
@@ -101,11 +109,16 @@ export default {
           name: '',
           type: 'pie',
           clockWise: false,
+          //饼图的半径。
           radius: ['66%', '68%'],
+          /*饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
+          支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是
+          相对于容器高度。*/
           center: ['50%', '50%'],
           hoverAnimation: false,
           itemStyle: {
             normal: {
+              //是否显示文本标签。
               label: {
                 show: true,
                 position: 'outside',
@@ -125,6 +138,7 @@ export default {
                 },
                 rich: rich
               },
+              //是否显示视觉引导线。
               labelLine: {
                 length: 10,
                 length2: 30,

echarts-screen/src/components/RoseCon.vue

@@ -35,6 +35,7 @@ export default {
       let myChart = echarts.init(document.getElementById('chart_right2'));
       let option = {
         color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
+        //工具箱配置全屏
         toolbox: {
           feature: {
             mytool: {
@@ -57,34 +58,54 @@ export default {
           },
         },
         tooltip: {
+          //触发类型
+          //数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
           trigger: 'item',
+          //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
           formatter: '{b} : {c} ({d}%)'
         },
         polar: {},
+        //极坐标系的角度轴。
         angleAxis: {
+          //强制设置坐标轴分割间隔
           interval: 1,
+          //坐标轴类型。
           type: 'category',
           data: [],
+          //角度轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
           z: 10,
+          //坐标轴轴线相关设置。
           axisLine: {
+            //是否显示坐标轴轴线。
             show: false,
+            //
             lineStyle: {
+              //坐标轴线线的颜色。
               color: '#0B4A6B',
+              //坐标轴线线宽。
               width: 5,
+              //坐标轴线线的类型。
               type: 'solid'
             },
           },
           axisLabel: {
+            /*默认会采用标签不重叠的策略间隔显示标签。
+            可以设置成 0 强制显示所有标签。*/
             interval: 0,
+            //是否显示刻度标签。
             show: true,
             color: '#0B4A6B',
             margin: 8,
             fontSize: 16
           },
         },
+        //极坐标系的径向轴。
         radiusAxis: {
+          //坐标轴刻度最小值。
           min: 40,
+          //坐标轴刻度最大值。
           max: 120,
+          //强制设置坐标轴分割间隔。
           interval: 20,
           axisLine: {
             show: false,
@@ -103,7 +124,9 @@ export default {
           },
           splitLine: {
             lineStyle: {
+              //分隔线颜色
               color: '#0B3E5E',
+              //分隔线线宽。
               width: 2,
               type: "solid"
             }
@@ -112,8 +135,11 @@ export default {
         calculable: true,
         series: [{
           type: 'pie',
+          //饼图半径
           radius: ['6%', '10%'],
+          //是否开启 hover 在扇区上的放大动画效果。
           hoverAnimation: false,
+          //是否显示视觉引导线。
           labelLine: {
             normal: {
               show: false,
@@ -136,7 +162,9 @@ export default {
               }
             }
           }]
-        }, {
+        },
+          //最外圈
+          {
           type: 'pie',
           radius: ['90%', '95%'],
           hoverAnimation: false,
@@ -220,6 +248,7 @@ export default {
       }
 
       myChart.setOption(option, true);
+      //自适应
       window.addEventListener('resize', () => {
         // myChart.resize();
       });