Echarts组件使用
一.script标签引入echarts.js文件 //引入echarts
复制代码二.html页面body放置div -- Echarts渲染容器
复制代码三.script标签内对Echarts初始化并配置 //初始化Echarts var myChart = echarts.init(document.getElementById('myChart')); //指定图标的配置项和数据，改变所有图表数据 var option = { legend: { // 图例配置 padding: 5, // 图例内边距，单位px，默认上下左右内边距为5 itemGap: 10, // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔 data: ['ios', 'android'] }, tooltip: { // 气泡提示配置 trigger: 'item', // 触发类型，默认数据触发，可选为：'axis' }, xAxis: [ // 直角坐标系中横轴数组 { type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明 data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } ], yAxis: [ // 直角坐标系中纵轴数组 { type: 'value', // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明 boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略，数组内数值代表百分比 splitNumber: 4 // 数值轴用，分割段数，默认为5 } ], series: [ { name: 'ios', // 系列名称 type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123] }, { name: 'android', // 系列名称 type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13] } ] }; //实例化的echarts图表，在DOM中渲染图标 myChart.setOption(option); 复制代码常用配置项的修改
toolbox：工具箱的显示和隐藏
- show :true/false 显示和隐藏
- left:"right"/"num值" top:"bottom"/"num值" 控制显示位置
- orient:"vertical" 对齐方式，默认水平
- magicType：{ //是否进行类型切换 show:true, type:["line","bar"] //修改的类型 }
- restore 是否进行刷新
- savaAsImage 是否进行刷新
- dataview：数据修改 复制代码
title：标题
text：主标题 subtext：副标题 复制代码
tooltip：数据提示
trigger: 'axis' 显示在轴上，默认是在线上显示 复制代码
dataZoom：数据区域缩放
show:true 默认为false start：20 开始位置为20% end： 80 结束位置为80% （默认100%） 复制代码
xAxis：
boundaryGap:true 起始结束两端是否留白 data：function(){ //数据可以是数组，可以是函数处理的数组结构 var list = []; for (var i = 1;i<30;i++){ list.push("2013-03-"+i); } return list }() //函数需要立即执行 复制代码
series：显示的数列
name:"" 显示几个数据
- type:"" 图标类型
