最近在用echarts做项目，抽点时间总结一下。 首先说一下什么是echarts。echarts是百度开发的类似于fusioncharts的图表展示控件。区别于fusioncharts的是echarts是基于html5的，不需要浏览器安装flash控件。只需要浏览器支持HTML ...
最近在用echarts做项目，抽点时间总结一下。
首先说一下什么是echarts。echarts是百度开发的类似于fusioncharts的图表展示控件。区别于fusioncharts的是echarts是基于html5的，不需要浏览器安装flash控件。只需要浏览器支持HTML5即可。
echarts主页：http://echarts.baidu.com/
echarts效果展示：http://echarts.baidu.com/doc/example.html?qq-pf-to=pcqq.c2c
echarts属性解读：http://echarts.baidu.com/doc/doc.html#Legend
先贴一个代码实例：
<body> <div id="main" ></div><!--图表展示位置DIV--> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts:'asset/echarts'//echarts路径 } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/pie' //使用的Echart类型，可在下面data部分查看。 ], function(ec){ var myChart = ec.init(document.getElementById('main'));//根据ID获取用于展示的DIV option = { title : { text: '未来一周气温变化', //图表标题 subtext: '纯属虚构' //图表副标题 }, tooltip : { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] //图例 }, toolbox: { //工具 show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ //X轴展示的内容 { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ //y轴坐标 { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ //具体展示内容 { name:'最高气温', //展示内容1对应的图例 type:'line', //图表类型，需根据该类型引入相应的js data:[11, 11, 15, 13, 12, 13, 10], //图表内容 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; myChart.setTheme("macarons"); //设置echarts的主题 myChart.setOption(option); //在DIV上绘制图表 }); </script> </body>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：echarts之我用
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
