echart柱状图 echart

echart移动端优化做移动端数据可视化产品，需要封装echarts图表做子组件，并兼容原先pc端api请求格式，还引入了地图数据，支持省份下钻。完成所有功能后，vendor大小2.49M，build速度59s，首屏加载速度和webpack打包速度都很慢。
webpack: 3.6 echarts:4.1
优化1:echart按需加载
（echart整体画图数据包700KB，比highcharts和f2要大，技术选型上可以考虑一下其他方案。）
从全局引用，优化为按需引用。引用echarts压缩过的省份地图的js数据，json数据会大一些，还需要registerMap 。
优化2:路由懒加载，vue异步组件，vendor分包，首屏加载速度加快。
将路由页面拆分chunk打包，所有路由页面打包在cube中。
按需加载省市js数据，打包到province中。
封装echart子组件，打包到echarts中。
分包结果：
npm run build --report
优化3:webpack打包速度
分包后build速度41s，先用 webpack-visualizer-plugin 分析一下当前打包的状况。
生产环境：
配置CommonsChunkPlugin
加速文件搜索
配置 resolve.modules
设置 testincludeexclude
使用并行压缩插件 webpack-parallel-uglify-plugin
配置externals（cdn）（会增加首屏加载时长）
DllPlugin和DllReferencePlugin （会加载首屏加载时长）
使用HappyPack来加速构建
npm run build:dll
npm run build
webpack 3.x版本，add-asset-html-webpack-plugin需要2.1.3版本。
报错： TypeError: Cannot read property 'compilation' of undefined
减少webpack打包时间，省份数据还编译。
加了cache-loader做缓存，用了 only-if-changed-webpack-plugin 插件，发现全局不动不编译，有一点动都编译。还和 html-webpack-plugin 有冲突。
巨大的echarts让人头大。
一开始想让打包好的dll，可以不首屏加载，动态加载。
发现有一个scriptjs的插件。
把echarts、地图数据拆到cdn里，scriptjs按需加载。
总结：
程序猿学好英语是件很重要的事情，github看的让人头大。
小师傅好厉害，哈哈哈。
相关链接：

文章插图
echarts怎么用？1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。
2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，
1.var myChart = echarts.init(document.getElementById("echart"));
2.var myChart=require('echarts').init(document.getElementById("echart"));
一般建议使用第一种方法进行初始化操作。
3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，
4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。
5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：
6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);
echarts是做什么的？echarts是做数据统计。
1、 Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。
2、底层依赖轻量级Canva+库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
扩展资料
echarts的优点：
1、国人开发，文档全，便于开发和阅读文档。
2、图表丰富，可以适用各种各样的功能。
echarts的缺点:
1、移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系。
2、echarts不失为一款比较适合我们这种码农使用的框架。
3、echarts就不贴代码了。毕竟文档很全。
参考资料：ECharts官网-eCharts
“echart”啥意思？单词是否正确，可能是E-chart（电子图表;电子航海图）
chart
英 [t?ɑ:t]美 [t?ɑ:rt]
n.图表;航海图;排行榜

echart柱状图 echart

秒懂生活扩展阅读