echart,echarts折线图

使用echart散点图绘制地图

之前没看过echart的地图，最近有个需求需要绘制到深圳地图，经过几番测试，实现需要的效果，这里写篇博客记录一下，先看效果图:

但如果不是node环境呢，比如本地的一个html文件，第一想到的是ajax，但这是本地模拟一下，使用ajax还是有点麻烦，这里超人鸭用一种不太规范的方法引入，这是json文件原本的样子:

我使用一个变量定义这个对象:

然后在html文件中用script标签引入:

这里已经引入成功了，我们可以打印测试一下:

是没问题的，现在拿到深圳地图的json数据，接下来就是绘制地图了，还是echart那一套:

先看看效果:

接下来就是往上面绘制散点图，既然是往以这个地图作为坐标系，那显示在上面点的位置就要在这个地图上，我们需要先写好每个地点的经纬度：

大家百度一下经纬度查询就能找到，然后是散点图的配置，还有一个处理数据的函数:

上面的处理函数也是从官网改造一点细节复制过来的，处理后的每一项data就是这个样子:

散点图会根据value的前两项去匹配坐标，在地图上显示，后面的数据并无关系。到这里的效果:

看到我使用了回调函数格式化了提示框显示的内容，这个回调函数带了一个params参数，这个对象里面基本什么信息都有，大家不知道的话打印一下什么都明了。

到这里就实现使用echart散点图绘制地图，超人鸭这篇文章所实现的适合那种某个区域的某种东西的分布情况，用处还是挺大的，欢迎大家指教哦。

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);

“echart”啥意思？

单词是否正确，可能是E-chart（电子图表;电子航海图）

chart

英 [t?ɑ:t] 美 [t?ɑ:rt]

n.图表;航海图;排行榜

vt.绘制地图;记录;记述;跟踪（进展或发展）

第三人称单数： charts 复数： charts 现在分词： charting 过去式： charted 过去分词： charted

echart树形图实现点击节点完整链路更换颜色

在某些需求下需要用到树形图来表达数据结构，我使用的是 echarts ，关于 echart 树形图的基础配置和使用这里就不展开。

直接上图，这是一个基础的树形图demo：

当点击非最末节点的时候，echart的默认行为为收缩该节点的子节点，这个行为会与下面实现的效果有关系，效果：

下面进入实现，一开始思考这个需求的时候，以为跟经常做的柱状图点击更换柱子颜色一样，都是去替换配置，当然某种情况下也是可以实现的，先简单说一下树形图的 data 结构，是使用 children 属性层层嵌套的结构：

按上面的思路，只要监听节点的点击事件，然后获取对应链路相关的节点，更改他们的 lineStyle ，然后 echart 实例重新 setOption 就可以，下面看一下大概实现：

看一下点击节点， echart 带的参数

到这里这种点击更换相关节点 linestyle 的方式就实现，但是这种方式有两个问题：

1.上面我们是假设 value 是唯一的，如果实际开发中 value 有实际用途不能让我们生成唯一的值，这种方法就无法实现。但这个还不是致命的。

2.上面说到，非最末节点点击时，会收缩与展开它的子节点，而我们上面实现高亮的时候是重新 setOption ，会将已操作的交互覆盖掉，点击前效果：

实现高亮的核心还是更换节点属性的 linestyle ，但是不能通过重新 setOption 来实现，在翻遍 echart 配置项的时候，最后看到了一个属性和一个方法：

实现：

先在 echart 配置项中添加 emphasis 时的效果：

因为 emphasis 属性默认是鼠标移入节点时的效果，所以我们手动触发高亮会和默认行为冲突，需要一个数组保存点击高亮的节点 dataIndex 。

点击时手动触发相关节点的高亮：

还需要覆盖 emphasis 的默认行为，也就是鼠标移入事件：

实现效果：

点击前：

点击后：

实现了。

我是鸭子，祝你幸福。

Echarts.js简介

在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。

Echarts.js是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。

官网首页有着很多实例以及相关介绍，获取echart.js可以从本人百度网盘获取，包含所有图表组件，可直接引用。

链接：

提取码：aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据

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

设置 test include exclude

使用并行压缩插件 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看的让人头大。

小师傅好厉害，哈哈哈。

相关链接：