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 @   飘然离去  阅读(493)  评论(0)    收藏  举报
编辑推荐：
· 复杂业务系统线上问题排查过程
· 通过抓包，深入揭秘MCP协议底层通信
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
· 糊涂啊！这个需求居然没想到用时间轮来解决
· 浅谈为什么我讨厌分布式事务
阅读排行：
· 为大模型 MCP Code Interpreter 而生：C# Runner 开源发布
· 面试时该如何做好自我介绍呢？附带介绍样板示例！！！
· Coze Studio：字节跳动 Coze 的开源版本来了！第一时间深度解析
· 复杂业务系统线上问题排查过程
· 本可避免的P1事故：Nginx变更导致网关请求均响应400
点击右上角即可分享
微信分享提示
字节旗下的 AI IDE