如何导入使用echarts和切换主题
网站如何使用echarts,要使用echarts绘制图形需要哪些js文件。下载的echarts示例里面有很多文件,实际使用到的只有3个文件(esl.js,echarts.js,echarts-map.js),如果不需要地图,那么只需要前面esl.js,echarts.js,其中esl.js是必须的。
下面以echarts-2.0.4为例,将下载的echarts-2.0.4压缩包解压到任意一个路径下,打开echarts-2.0.4\doc\example\www\js路径,将里面的3个js文件拷贝到你的网站目录下,如网站根目录/js文件夹下。如果你需要切换echarts的theme主题,需要将echarts-2.0.4\doc\example\theme下的主题js文件一起拷贝到网站根目录/js文件夹下。
如何使用导入echarts和切换主题源代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>如何使用导入echarts和切换主题</title> <!--引入esl.js模块加载器--> <script src="js/esl.js"></script> </head> <body> <!--echarts容器--> <div id="echarts" style="width:400px;height:300px"></div> <script type="text/javascript"> //为模块加载器配置echarts的路径,注意相对于当前页面所在路径(如果是重写过路径的,注意是相对于重写后的路径,就是浏览器地址栏显示的url) var fileLocation = 'js/echarts'; require.config({ paths: { echarts: fileLocation, //定义所需图表路径,其实可以不用定义,但是调用下面的require加载图表模块时会请求对应js文件,由于不存在会404错误 'echarts/chart/line': fileLocation, 'echarts/chart/bar': fileLocation, 'echarts/chart/scatter': fileLocation, 'echarts/chart/k': fileLocation, 'echarts/chart/pie': fileLocation, 'echarts/chart/radar': fileLocation, 'echarts/chart/map': fileLocation, 'echarts/chart/chord': fileLocation, 'echarts/chart/force': fileLocation, 'echarts/chart/gauge': fileLocation, 'echarts/chart/funnel': fileLocation, //图表路径结束 'dark': 'js/dark'//定义主题路径 } }); function requireCallback(echarts) {//加载完毕后的回调函数,生成echarts myChart = echarts.init(document.getElementById('echarts')); //加载dark主题theme文件并调用setTheme进行替换 require(['dark'], function (theme) { curTheme = theme; myChart.setTheme(theme); }); myChart.setOption({//设置数据,更多配置项目看这个:http://echarts.baidu.com/doc/doc.html title: { text: '如何使用导入echarts和切换主题' }, xAxis: [{ type: 'category', splitLine: { show: false }, data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数'] }], yAxis: [{ type: 'value' }], series: [ { name: '辅助', type: 'bar', stack: '总量', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: [0, 1700, 1400, 1200, 300, 0] }, { name: '生活费', type: 'bar', stack: '总量', itemStyle: { normal: { label: { show: true, position: 'inside' } } }, data: [2900, 1200, 300, 200, 900, 300] } ] }); } //动态加载echarts然后在回调函数中开始使用,注意和require.config配置的path一致,根据需求加载你要的图表 require(['echarts', 'echarts/chart/bar'], requireCallback); </script> </body> </html>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:如何导入使用echarts和切换主题