Echarts图表之南丁格尔图

最新推荐文章于 2024-06-30 12:46:56 发布

gly_technology

最新推荐文章于 2024-06-30 12:46:56 发布

阅读量2.2k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/gly_technology/article/details/122552647

版权

<!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">
           //基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('main'));
           //定义图表
           var option = {
               //饼图块的颜色
               color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9'],
               //背景颜色
               backgroundColor: 'rgba(1,202,217,.2)',
               //在容器中的位置
               grid: {
                   left: 10,
                   right: 40,
                   top: 20,
                   bottom: 0,
                   //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)
                   //为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
                   containLabel: true
               },
               //图例
               // legend: {
               // x : 'center',
               // y : '70%',
               // textStyle:{
               // fontSize: 10,
               // color:'rgba(255,255,255,.7)'
               // },
               // data:['康定市','丹巴县','甘孜县','理塘县']
               // },
               //是否启用拖拽重计算特性，默认关闭(即值为false)
               calculable: true,
               //用于设置图表数据之用
               series: [{
                   //系列名称
                   name: '面积模式',
                   //图表类型
                   type: 'pie',
                   //中心圈
                   radius: [5, 60],
                   //饼图的位置
                   center: ['50%', '55%'],
                   //显示成南丁格尔图
                   roseType: 'area',
                   //数据内容
                   data: [{
                           value: 10,
                           name: '康定市',
                       },
                       {
                           value: 5,
                           name: '丹巴县'
                       },
                       {
                           value: 15,
                           name: '甘孜县'
                       },
                       {
                           value: 25,
                           name: '理糖县'
                       }
                   ]
               }]
           };
           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       </script>
   </body>
</html>