Echarts图表之带提示框的饼图

最新推荐文章于 2023-07-05 13:43:55 发布

gly_technology

最新推荐文章于 2023-07-05 13:43:55 发布

阅读量864

点赞数

文章标签： echarts 前端 javascript

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

版权

<!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)',
               color: ['#1AFEFD', '#2E7DFF', '#FECB89', '#055EA2', '#0AD5FE'],
               grid: {
                   left: 20,
                   right: 20,
                   top: 0,
                   bottom: 20
               },
               // 提示框
               tooltip: {
                   // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                   trigger: 'item',
                   formatter: '{a}<br/>{b}:{c}({d}%)'
               },
               // 图表标题
               title: {
                   x: 'center',
                   show: true,
                   text: '销售量组成',
                   textStyle: {
                       color: '#fff'
                   }
               },
               // 图例
               legend: {
                   top: 20,
                   left: 10,
                   orient: 'vertical',
                   textStyle: {
                       fontSize: 16,
                       color: 'rgba(255,255,255)'
                   },
                   data: ['套餐A', '套餐B', '套餐C', '套餐D', '套餐E'],
                   //circle圆形,rect长方形,roundRect圆角长方形,triangle三角形,diamond菱形,pin不规则圆,arrow不规则三角形,none没有图标
                   icon: 'rect'
               },
               series: [{
                   name: '销售量组成',
                   // 类型：饼图
                   type: 'pie',
                   radius: '55%',
                   center: ['50%', '50%'],
                   data: [{
                           value: 45,
                           name: '套餐A'
                       },
                       {
                           value: 45,
                           name: '套餐B'
                       },
                       {
                           value: 30,
                           name: '套餐C'
                       },
                       {
                           value: 20,
                           name: '套餐D'
                       },
                       {
                           value: 220,
                           name: '套餐E'
                       }
                   ]
               }]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>

gly_technology

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Echarts图表之带提示框的饼图

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Echarts图表</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min....
复制链接

扫一扫