示例代码

环形饼图

  1. option = {
  2.    title:{
  3.         text:"3000",
  4.         x:'center',
  5.         y:'center',
  6.         textStyle:{
  7.           fontSize:60
  8.         }
  9.   },
  10.   tooltip: {
  11.     trigger: 'item'
  12.   },
  13.   legend: {
  14.     top: '97%',
  15.     left: 'center',
  16.     textStyle:{
  17.           fontSize:15
  18.     }
  19.   },
  21.   series: [
  22.     {
  23.       name: 'Access From',
  24.       type: 'pie',
  25.       radius: ['40%', '70%'],
  26.       avoidLabelOverlap: false,
  27.       itemStyle: {
  28.         borderRadius: 10,
  29.         borderColor: '#fff',
  30.         borderWidth: 2
  31.       },
  33.       label: {
  34.         show: true,
  35.         formatter:"{c}",
  36.         fontSize:40,
  37.         //position: 'inside'
  38.       },
  39.       emphasis: {
  40.         label: {
  41.           show: true,
  42.           fontSize: '40',
  43.           fontWeight: 'bold'
  44.         }
  45.       },
  46.       labelLine:{
  47.         show:true,
  48.         length:100,
  49.         lineStyle:{
  50.           width:4
  51.         }
  52.       },
  53.       data: [
  54.         { value: 650, name: '批而未供已处置' },
  55.         { value: 950, name: '批而未供未处置' },
  56.         { value: 350, name: '闲置土地已处置' },
  57.         { value: 1050, name: '闲置土地未处置' }
  58.       ]
  59.     }
  60.   ]
  61. };
  1. option = {
  2.   tooltip: {
  3.     trigger: 'axis',
  4.     axisPointer: {
  5.       // Use axis to trigger tooltip
  6.       type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
  7.     }
  8.   },
  9.   legend: {},
  10.   grid: {
  11.     left: '3%',
  12.     right: '4%',
  13.     bottom: '3%',
  14.     containLabel: true
  15.   },
  16.   yAxis: {
  17.     type: 'value'
  18.   },
  19.   xAxis: {
  20.     type: 'category',
  21.     data: ['1月', '2月', '3月', '4月', '5月', '6月']
  22.   },
  23.   series: [
  24.     {
  25.       name: '融桥开发区',
  26.       type: 'bar',
  27.       stack: 'total',
  28.       label: {
  29.         show: true
  30.       },
  31.       emphasis: {
  32.         focus: 'series'
  33.       },
  34.       data: [320, 302, 301, 334, 390, 330, 320]
  35.     },
  36.     {
  37.       name: '龙田镇',
  38.       type: 'bar',
  39.       stack: 'total',
  40.       label: {
  41.         show: true
  42.       },
  43.       emphasis: {
  44.         focus: 'series'
  45.       },
  46.       data: [120, 132, 101, 134, 90, 230, 210]
  47.     },
  48.     {
  49.       name: '镜洋镇',
  50.       type: 'bar',
  51.       stack: 'total',
  52.       label: {
  53.         show: true
  54.       },
  55.       emphasis: {
  56.         focus: 'series'
  57.       },
  58.       data: [220, 182, 191, 234, 290, 330, 310]
  59.     },
  60.     {
  61.       name: '东张镇',
  62.       type: 'bar',
  63.       stack: 'total',
  64.       label: {
  65.         show: true
  66.       },
  67.       emphasis: {
  68.         focus: 'series'
  69.       },
  70.       data: [150, 212, 201, 154, 190, 330, 410]
  71.     },
  72.     {
  73.       name: '一都镇',
  74.       type: 'bar',
  75.       stack: 'total',
  76.       label: {
  77.         show: true
  78.       },
  79.       emphasis: {
  80.         focus: 'series'
  81.       },
  82.       data: [820, 832, 901, 934, 900, 850, 1090]
  83.     }
  84.   ]
  85. };
  1. setTimeout(function () {
  2.   option = {
  3.     legend: {},
  4.     tooltip: {
  5.       trigger: 'axis',
  6.       showContent: false
  7.     },
  8.     dataset: {
  9.       source: [
  10.         ['product', '1月', '2月', '3月', '4月', '5月', '6月'],
  11.         ['批而未供', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
  12.         ['供而未建', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
  13.         ['建有余地', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
  14.         ['建完空置', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
  15.       ]
  16.     },
  17.     xAxis: { type: 'category' },
  18.     yAxis: { gridIndex: 0 },
  19.     grid: { top: '55%' },
  20.     series: [
  21.       {
  22.         type: 'line',
  23.         smooth: true,
  24.         seriesLayoutBy: 'row',
  25.         emphasis: { focus: 'series' }
  26.       },
  27.       {
  28.         type: 'line',
  29.         smooth: true,
  30.         seriesLayoutBy: 'row',
  31.         emphasis: { focus: 'series' }
  32.       },
  33.       {
  34.         type: 'line',
  35.         smooth: true,
  36.         seriesLayoutBy: 'row',
  37.         emphasis: { focus: 'series' }
  38.       },
  39.       {
  40.         type: 'line',
  41.         smooth: true,
  42.         seriesLayoutBy: 'row',
  43.         emphasis: { focus: 'series' }
  44.       },
  45.       {
  46.         type: 'pie',
  47.         id: 'pie',
  48.         radius: '30%',
  49.         center: ['50%', '25%'],
  50.         emphasis: {
  51.           focus: 'self'
  52.         },
  53.         label: {
  54.           formatter: '{b}: {@2012} ({d}%)'
  55.         },
  56.         encode: {
  57.           itemName: 'product',
  58.           value: '2012',
  59.           tooltip: '2012'
  60.         }
  61.       }
  62.     ]
  63.   };
  64.   myChart.on('updateAxisPointer', function (event) {
  65.     const xAxisInfo = event.axesInfo[0];
  66.     if (xAxisInfo) {
  67.       const dimension = xAxisInfo.value + 1;
  68.       myChart.setOption({
  69.         series: {
  70.           id: 'pie',
  71.           label: {
  72.             formatter: '{b}: {@[' + dimension + ']} ({d}%)'
  73.           },
  74.           encode: {
  75.             value: dimension,
  76.             tooltip: dimension
  77.           }
  78.         }
  79.       });
  80.     }
  81.   });
  82.   myChart.setOption(option);
  83. });