echarts图表详解2. 饼图详解标准饼图 3. 辅助线的作用与echarts3.x与2.0x的区别 1. echa

1.echarts图表标准配置，图示技巧

先引入 < script src="echarts.min.js">
然后设置盒子 < div id="main" style="width: 600px;height:400px;">
基于准备好的dom，初始化echarts实例

var myChart=echarts.init(document.getElementById('main'));

  myChart.setOption（{
 title: {  //主题
       text: 'ECharts 入门示例'
   },
   tooltip: {},//提示框组件。
   legend: {  //图例组件
       data:['销量']
   },
   xAxis: {  //x轴
       data: ["衬衫","羊毛衫","高跟鞋","袜子"]
   },
   yAxis: {}, y轴
   series: [{    //系列列表，决定列表类型的
       name: '销量',
       type: 'bar',
       data: [5, 20, 36, 10]
   }]    }）

2. 饼图详解标准饼图

引入echarts < script src="echarts.min.js">
设置div盒子，渲染图表的< div id="main" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('main'));

指定突图表的配置项与数据

myChart.setOption({
 title: {
//text：某站点用户访问来源',//主标题
//subtext:'纯属虚构',//副标题
x: "center" //x轴方向对齐方式
},
 tooltip: {  
trigger: "item",
formatter: "{a}<br/>{b}:{c}({d}%)"
 },
   legend: {  //图例  
orient: "vertical",
bottom: "bottom",
data: ["考点专练", "套卷练习", "仿真模考"]
 },
toolbox：{} //工具栏
 series: [
 {
  name: "访问来源",
  type: "pie",
  radius: "55%",
  center: ["50%", "60%"],
  data: [
    { value: 335, name: "考点专练" },
    { value: 310, name: "套卷练习" },
    { value: 234, name: "仿真模考" } //{value:135,name:'视频广告'}, //{value:1548,name:'搜索引擎'}
  ],
  itemStyle: {
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0,0,0,0.5)"
    }
  }
}

] });

3. 辅助线的作用与echarts3.x与2.0x的区别

1. echarts3.x与2.0x的区别

 Echarts2.x更加强调模块化，因此在引入时官方推荐使用模块化包引入，引入方式也很简单：

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

2. 辅助线的作用

  能个更清晰的看到数据刚明显的一些变化。

4. 托动自动计算功能实现

5. 饼图高级环形图

引入echarts < script src="echarts.min.js">
1. 设置div盒子，渲染图表的< div id="main" style="width: 600px;height:400px;">
3. 初始化图表 var myChart=echarts.init(document.getElementById('main'));

指定突图表的配置项与数据

myChart,setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
 },
legend: {
 orient: 'vertical',
left: 10,
   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    }   ,
   series: [
{
   name: '访问来源',
   type: 'pie',
   radius: ['50%', '70%'],
   avoidLabelOverlap: false,
   label: {
       show: false,
       position: 'center'
   },
       emphasis: {
           label: {
              show: true,
              fontSize: '30',
            fontWeight: 'bold'
       }
    },
       labelLine: {
         show: false
    },
               data: [
       {value: 335, name: '直接访问'},
       {value: 310, name: '邮件营销'},
       {value: 234, name: '联盟广告'},
       {value: 135, name: '视频广告'},
       {value: 1548, name: '搜索引擎'}
   ]

} ] })

6. 饼图高级环形嵌套图

1. 引入echarts    < script src="echarts.min.js"></script>

设置div盒子，渲染图表的< div id="main" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('main'));

指定突图表的配置项与数据

myChart,setOption({
tooltip: {
   trigger: 'item',
   formatter: '{a} <br/>{b}: {c} ({d}%)'

}, legend: { orient: 'vertical', left: 10, data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'] }, series: [ { name: '访问来源', type: 'pie', selectedMode: 'single', radius: [0, '30%'],

   label: {
       position: 'inner'
   },
   labelLine: {
       show: false
   },
   data: [
       {value: 335, name: '直达', selected: true},
       {value: 679, name: '营销广告'},
       {value: 1548, name: '搜索引擎'}
   ]
   },
    {
         name: '访问来源',
       type: 'pie',
   radius: ['40%', '55%'],
   label: {
       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: '其他'}
   ]

} ] })

7. 散点图高级提示信息

引入echarts < script src="echarts.min.js">
设置div盒子，渲染图表的< div id="main" style="width: 600px;height:400px;">
初始化图表 var myChart=echarts.init(document.getElementById('main'));
指定突图表的配置项与数据

8. 气泡图

引入echarts < script src="echarts.min.js">
1. 设置div盒子，渲染图表的< div id="main" style="width: 600px;height:400px;">
2. 初始化图表 var myChart=echarts.init(document.getElementById('main'));
指定突图表的配置项与数据