echarts example

by Paul Nawat

HTML

<script src="//cdn.bootcss.com/echarts/3.2.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

// 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

 // 指定图表的配置项和数据
 var option = {
   tooltip: {
     trigger: 'item',
     formatter: "{a} <br/>{b}: {c} ({d}%)"
   },
   legend: {
     orient: 'vertical',
     x: 'left',
     data: ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
   },
   series: [{
     name: '访问来源',
     type: 'pie',
     radius: ['50%', '70%'],
     avoidLabelOverlap: true,
     label: {
       normal: {
         show: false,
         position: 'center'
       },
       emphasis: {
         show: true,
         textStyle: {
           fontSize: '30',
           fontWeight: 'bold'
         }
       }
     },
     labelLine: {
       normal: {
         show: false
       }
     },
     data: [{
         value: 335,
         name: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
       },
       {
         value: 310,
         name: '邮件营销'
       },
       {
         value: 234,
         name: '联盟广告'
       },
       {
         value: 135,
         name: '视频广告'
       },
       {
         value: 1548,
         name: '搜索引擎'
       }
     ]
   }]
 };

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