1.echarts图表

昨天说了如何创建第一个图表，那么条形图肯定是不满足我们的业务需求，在业务系统中，我们遇到的问题是复杂的。可能是条形图，折线图，饼图，K线图等等。那么我们如何创建各种不同的图？

2.开始

那么本文就来带你学习如何创建各种不同类型的图表。学习的主要目的不是学会这一种东西而是学会一种学习的思维和方法。

打开Ecahrts官网
打开Ecahrts官网找到实例，，找到你需要的图，我这里以饼图为例。
打开一个饼图例子
我这里以自己的心情为准，随意打开了一个，各位同学们可以先按照我的步骤来，或者看自己心情也可以的。
找到昨天的demo
copy饼图实例的左侧配置项的代码（从第三行开始copy哦)
替换原有的demo实例中的option变量
附上完整代码


<!DOCTYPE html>
<html>
<head>
   <title>echarts</title>
   <script type="text/javascript" src="../echarts.js"></script>
</head>
<body>
这是echarts的一个测试
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="width: 600px;height:400px;"></div>
   <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('main'));

       // 指定图表的配置项和数据
      option = {
   tooltip: {
       trigger: 'item',
       formatter: "{a} <br/>{b}: {c} ({d}%)"
   },
   legend: {
       orient: 'vertical',
       x: 'left',
       data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
   },
   series: [
       {
           name:'访问来源',
           type:'pie',
           selectedMode: 'single',
           radius: [0, '30%'],

           label: {
               normal: {
                   position: 'inner'
               }
           },
           labelLine: {
               normal: {
                   show: false
               }
           },
           data:[
               {value:335, name:'直达', selected:true},
               {value:679, name:'营销广告'},
               {value:1548, name:'搜索引擎'}
           ]
       },
       {
           name:'访问来源',
           type:'pie',
           radius: ['40%', '55%'],
           label: {
               normal: {
                   formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                   backgroundColor: '#eee',
                   borderColor: '#aaa',
                   borderWidth: 1,
                   borderRadius: 4,
                   // shadowBlur:3,
                   // shadowOffsetX: 2,
                   // shadowOffsetY: 2,
                   // shadowColor: '#999',
                   // padding: [0, 7],
                   rich: {
                       a: {
                           color: '#999',
                           lineHeight: 22,
                           align: 'center'
                       },
                       // abg: {
                       //     backgroundColor: '#333',
                       //     width: '100%',
                       //     align: 'right',
                       //     height: 22,
                       //     borderRadius: [4, 4, 0, 0]
                       // },
                       hr: {
                           borderColor: '#aaa',
                           width: '100%',
                           borderWidth: 0.5,
                           height: 0
                       },
                       b: {
                           fontSize: 16,
                           lineHeight: 33
                       },
                       per: {
                           color: '#eee',
                           backgroundColor: '#334455',
                           padding: [2, 4],
                           borderRadius: 2
                       }
                   }
               }
           },
           data:[
               {value:335, name:'直达'},
               {value:310, name:'邮件营销'},
               {value:234, name:'联盟广告'},
               {value:135, name:'视频广告'},
               {value:1048, name:'百度'},
               {value:251, name:'谷歌'},
               {value:147, name:'必应'},
               {value:102, name:'其他'}
           ]
       }
   ]
};

       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
   </script>
</body>
</html>

附上效果图

4.联系我

各位不懂的小伙伴可以加入本人的技术交流群QQ：534893126哦。欢迎各位小伙伴来积极探讨技术问题哦。也可以发送问题到本人邮箱： [email protected]

echarts进阶一

echarts进阶一

1.echarts图表

2.开始

4.联系我

相关推荐