echarts自从2.18版本后引入了全新的单文件打包构建策略 导致在实际项目中引入的时候有很多问题解决办法
1、requireJs引入echarts,采用包引入packages,如:
packages: [ { name: 'echarts', location: 'lib/thirdparty/echarts/src', main: 'echarts' }, { name: 'zrender', location: 'lib/thirdparty/zrender/src', // zrender与echarts在同一级目录 main: 'zrender' } ],
2、调用init方法,参数dom元素使用document.getElementById获取需要渲染的区域
3、可能产生的错误:1)、ComponentClass is undefined 解决办法:把图表使用的标签模块化。
var componentLibrary = require('./component'); componentLibrary.define('title', require('./component/title')); componentLibrary.define('tooltip', require('./component/tooltip')); componentLibrary.define('legend', require('./component/legend')); componentLibrary.define('axis', require('./component/axis')); componentLibrary.define('base', require('./component/base')); componentLibrary.define('dataView', require('./component/dataView')); componentLibrary.define('dataZoom', require('./component/dataZoom')); componentLibrary.define('grid', require('./component/grid')); componentLibrary.define('legend', require('./component/legend')); componentLibrary.define('polar', require('./component/polar')); componentLibrary.define('timeline', require('./component/timeline')); componentLibrary.define('toolbox', require('./component/toolbox')); componentLibrary.define('valueAxis', require('./component/valueAxis')); componentLibrary.define('dataRange', require('./component/dataRange')); componentLibrary.define('roamController', require('./component/roamController'));
2)XX has not been required. 未加载相应的js模块,在echarts.js 文件中找到
var chartLibrary = require('./chart');
添加你需要加入的模块,
chartLibrary.define('line', require('./chart/line')); chartLibrary.define('map', require('./chart/map'));