百度Echarts图表JS插件的使用

来源：互联网发布：佳能dpp mac 编辑：程序博客网时间：2024/05/17 02:48

看到一个H5的图表，忍不住想自己做一下。

刚开始的时候用了iChart.js这个插件，后来发现这个插件并不支持H5，哭~

后来网上找了百度的这个Echarts插件，真的觉得挺不错的，以后做图表的话就用它了！

1. https://codeload.github.com/ecomfe/echarts/zip/master 在这里下载整个echarts包；

2. 将包中的 esl.js 和 echarts.js 放在js文件夹下，然后就开始编写代码啦；

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Echarts Demo</title><script src="js/esl.js"></script></head><body><div><div id="main" style="height:400px"></div></div></body><script>// 路径配置require.config({paths: {'echarts': 'js/echarts','echarts/chart/bar': 'js/echarts','echarts/chart/line': 'js/echarts'}});// 使用require(['echarts','echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载'echarts/chart/line'],function(ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('main'));option = {title: {text: '环球集团公司（合并）',subtext: '2012年07月',x: 'center'},tooltip: {trigger: 'axis'},toolbox: {feature: {dataView: {show: false,readOnly: false},magicType: {show: false,type: ['line', 'bar']},restore: {show: false},saveAsImage: {show: false}}},legend: {orient: 'horizontal',y: 'bottom',data: ['销售收入', '利润', '利润率']},xAxis: [{type: 'category',data: ['2012年05月', '2012年06月', '2012年07月']}],yAxis: [{type: 'value',name: '',min: 0,max: 1900,interval: 380,axisLabel: {formatter: '{value}'}}, {type: 'value',name: '单位：万元',min: 0,max: 50,interval: 10,axisLabel: {formatter: '{value} %'}}],series: [{name: '销售收入',type: 'bar',data: [945, 1445, 1845]}, {name: '利润',type: 'bar',data: [245, 645, 791]}, {name: '利润率',type: 'line',yAxisIndex: 1,data: [26, 45, 43]}]};// 为echarts对象加载数据 myChart.setOption(option);});</script></html>

出来的效果233

0 0