echarts的学习

博客1.：https://zrysmt.github.io/

博客2:http://blog.csdn.net/future_todo/article/details/60956942

工作中一个需求echarts2升级到echarts3

1.https://www.zhihu.com/question/41001947

echart3还有有点不兼容2的地方，不太多。改进不说了，2.x代码不能用的地方，我碰到有这几个：拖动重算没有了，geo标签定位修正没有了，百度地图的调用方法彻底换了。
还有几个想不起来的，应该都是小问题，以后想到再来补充。

2.http://superzdev.com/2016/01/26/echarts-please-readme/

3. echarts2中如果echarts-all.js 这个如果引入的话，不不需要通过网络去请求其他的包了

?
1
2
<!-- ECharts单文件引入 -->
 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

4.零点echarts的代码保留

　　

5.怎么设置label 的显示内容。　　

?
1
2
3
4
formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]
        }

6. http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl

7.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
var data = [
     {name: '太原市', value: [20100,'+13%','21%',20000,'+13%','21%']},
     {name: '大同市', value: [20200,'+13%','21%',20000,'+13%','21%']},
     {name: '阳泉市', value: [20300,'+13%','21%',20000,'+13%','21%']},
     {name: '长治市', value: [20400,'+13%','21%',20000,'+13%','21%']},
     {name: '晋城市', value: [20500,'+13%','21%',20000,'+13%','21%']},
     {name: '晋中市', value: [20600,'+13%','21%',20000,'+13%','21%']},
     {name: '运城市', value: [20700,'+13%','21%',20000,'+13%','21%']},
     {name: '忻州市', value: [20800,'+13%','21%',20000,'+13%','21%']},
     {name: '临汾市', value: [20900,'+13%','21%',20000,'+13%','21%']},
     {name: '吕梁市', value: [21000,'+13%','21%',20000,'+13%','21%']}
]
var geoCoordMap = {
    '太原市':[112.55,37.87],
    '大同市':[113.30,40.08],
    '阳泉市':[113.57,37.85],
    '长治市':[113.12,36.20],
    '晋城市':[112.83,35.50],
    '晋中市':[112.75,37.68],
    '运城市':[110.98,35.02],
    '忻州市':[112.73,38.42],
    '临汾市':[111.52,36.08],
    '吕梁市':[111.13,37.52]
}
 
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
 
app.title = '34 省切换查看';
 
var provinces = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江',  '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
 
function showProvince() {
    var name = provinces[currentIdx];
 
    // myChart.showLoading();
 
    $.get('vendors/echarts/map/json/province/' + name + '.json', function (geoJson) {
 
        // myChart.hideLoading();
 
        echarts.registerMap(name, geoJson);
 
        myChart.setOption(option = {
            backgroundColor: '#404a59',
            title: {
                text: provincesText[currentIdx],
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'map',
                    mapType: name,
                    label: {
                        emphasis: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#389BB7',
                            areaColor: '#fff',
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    },
                    animation: false
                    // animationDurationUpdate: 1000,
                    // animationEasingUpdate: 'quinticInOut'
                }
            ]
        });
    });
}
var currentIdx = 0;
option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter:function (params, ticket, callback) {
            console.log(params)
           return params.data.name+'<br/>当月<br/>销量：'+params.data.value[2]+'<br/>同比：'+params.data.value[3]+'<br/>市场份额：'+params.data.value[4]+'<br/><br/>累计<br/>'+'销量：'+params.data.value[5]+'<br/>同比：'+params.data.value[6]+'<br/>市场份额：'+params.data.value[7]
        }
    },
    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    graphic: [{
        id: 'left-btn',
        left: 10,
        top: 'middle',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    }, {
        id: 'right-btn',
        type: 'circle',
        shape: { r: 20 },
        style: {
            text: '>',
            fill: '#eee'
        },
        top: 'middle',
        right: 10,
        onclick: function () {
            currentIdx = (currentIdx + 1) % provinces.length;
            showProvince();
        }
    }],
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 1000;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};
showProvince();

9.http://gallery.echartsjs.com/editor.html?c=xSyxuDklzHl

10.

 

　　

 11.显示平均线。

 12.饼图有时间必须设置一个width，要不显示不出来。

13. http://blog.csdn.net/she_lover/article/details/51448967

14. http://echarts.baidu.com/demo.html#lines-airline

同一个起点和终点划出不同的线。

15.http://echarts.baidu.com/demo.html#graph

改变线条的粗细。

原来设置统一的线条粗线，现在每一条线都设置不同的粗线。

graph.links = graph.links.map(function(item){

        item.lineStyle= {

                    normal: {

                        color: 'source',

                        curveness: 0.3,

                        width:item.weight

                    }

                }

        return item;

    })

　

posted @   飘然离去  阅读(490)  评论(0)    收藏  举报
编辑推荐：
· 领域模型应用
· 记一次 ADL 导致的 C++ 代码编译错误
· MySQL查询执行顺序：一张图看懂SQL是如何工作的
· 为什么PostgreSQL不自动缓存执行计划？
· 于是转身独立开发者
阅读排行：
· C#/.NET/.NET Core优秀项目和框架2025年6月简报
· Cursor 1.2重磅更新，这个痛点终于被解决了！
· C#开发的Panel滚动分页控件（滑动版） - 开源研究系列文章
· 上周热点回顾（6.30-7.6）
· 记一次ADL导致的C++代码编译错误
点击右上角即可分享
微信分享提示