Echarts图表之变形圆环图(二)

最新推荐文章于 2024-08-23 09:09:12 发布

gly_technology

最新推荐文章于 2024-08-23 09:09:12 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/gly_technology/article/details/122574866

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           var option = {
               backgroundColor: 'rgba(1,202,217,.2)',
               // 图例
               legend: {
                   data: ['公路营运载客', '公路营运载货']
               },
               // 图表标题
               title: {
                   left: '30%',
                   top: '60%',
                   text: '2018年公路运营拥有量(145.18万辆)',
                   textStyle: {
                       color: '#fff',
                       fontSize: 14,
                       //文字描边
                       textBorderColor: 'red'
                   }
               },
               series: [{
                       name: '公路',
                       type: 'pie',
                       // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选‘single’,‘multiple’,分别表示单选还是多选。
                       selectedMode: 'single',
                       radius: [0, '32%'],
                       // 标签不显示
                       label: {
                           normal: {
                               show: false
                           }
                       },
                       // 标签线不显示
                       labelLine: {
                           normal: {
                               show: false
                           }
                       },
                       data: [{
                           value: 40,
                           name: '客运',
                           itemStyle: {
                               normal: {
                                   color: '#ff4948'
                               }
                           }
                       }]
                   },
                   {
                       name: '营运',
                       type: 'pie',
                       radius: ['42%', '55%'],
                       label: {
                           normal: {
                               show: true
                           }
                       },
                       labelLine: {
                           normal: {
                               show: true
                           }
                       },
                       data: [{
                               value: 98.26,
                               name: '公路营运载客',
                               itemStyle: {
                                   normal: {
                                       color: '#ffa74d'
                                   }
                               }
                           },
                           {
                               value: 1.74,
                               name: '公路营运载货',
                               itemStyle: {
                                   normal: {
                                       color: '#4af0fe'
                                   }
                               }
                           }
                       ]
                   }
               ]
           }
           myChart.setOption(option);
       </script>
   </body>
</html>