记录一下echarts的学习过程

测试

安装

官网下载不提了，引入后新建div 设置id和宽高，script中注册： var myChart = echarts.init(document.getElementById(‘groupA’)); 然后定义数据及样式 var option ={…}; 最后推送样式回元素 myChart.setOption(option);

基本样式

option = { tooltip : { ///鼠标悬浮标签，可设置样式 trigger: ‘axis’, axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : ‘shadow’ // 默认为直线，可选为：’line’ | ‘shadow’ } }, legend: { //图例，与series中元素的name对应匹配 data:[‘First’, ‘Secend’, ‘Third’,’Forth’] }, toolbox: {///中间的工具盒子，可以放缩放、还原、保存图片等工具按钮 left: ‘center’, feature: { dataZoom: { yAxisIndex: ‘none’ }, restore: {}, saveAsImage: {} } }, dataZoom: [{ ///数据缩放插件 可以拖拽、滚轮等 startValue: ‘2014-06-01’ }, { type: ‘inside’ }], grid: { left: ‘3%’, right: ‘4%’, bottom: ‘3%’, containLabel: true }, visualMap: { ///增加可视化控制图例，规定了右上角位置，用上下限的形式规定颜色信息。 top: 10, right: 10, pieces: [{ gt: 0, lte: 50, color: ‘#096’ }, { gt: 50, lte: 100, color: ‘#ffde33’ }, { gt: 100, lte: 150, color: ‘#ff9933’ }, { gt: 150, lte: 200, color: ‘#cc0033’ }, { gt: 200, lte: 300, color: ‘#660099’ }, { gt: 300, color: ‘#7e0023’ }], outOfRange: { color: ‘#999’ } }, xAxis : [ //x轴内容 { type : ‘value’ } ], yAxis : [ //Y轴内容 { type : ‘category’, axisTick : {show: false}, data : [‘Australia’,’Denmark’,’France’,’Peru’] } ], series : [ //数据系列，其中的data是数据。type决定图表类型 { name:’First’, type:’bar’, stack: ‘总量’, markLine: { 通过数值划直线 本例子是在type:line类型下 silent: true, data: [{ yAxis: 50 }, { yAxis: 100 }, { yAxis: 150 }, { yAxis: 200 }, { yAxis: 300 }] }, label: { normal: { show: true, position: ‘inside’ } }, data:[200, 170, 240, 244] } ] }