echarts 教程

joker...2021年10月12日大约 14 分钟

echarts 教程

1. 简介

由百度 ECharts 团队创建，联合公司内外众多数据可视化从业人组成的技术研究虚拟组织，致力于数据可视化的相关研究、教育普及、产品研发及生态建设。

2. 入门

2.1 环境准备

flexible.js+rem 智能大屏适配

flexible 是阿里出品的屏幕适配。

https://github.com/amfe/lib-flexible

引用js的话

https://github.com/amfe/lib-flexible/blob/2.0/index.js

具体例子

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        var rem = docEl.clientWidth / 24;
        docEl.style.fontSize = rem + "px";
    }

    setRemUnit();

    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            setRemUnit();
        }
    });

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);

vscode cssrem插件

flex 布局

less 使用

把less 编译成css插件

2.2 入门demo

基础设置

flexible.js

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        var rem = docEl.clientWidth / 24;
        docEl.style.fontSize = rem + "px";
    }

    setRemUnit();

    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            setRemUnit();
        }
    });

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);

页面基础

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入屏幕适配js -->
    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/china.js"></script>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</head>

<body>
    <!--  开始书写头文件 -->
    <header>
        <h1>数据可视化echarts</h1>
        <div class="showTime"></div>
    </header>

    <!-- 页面主体部分 -->
    <section class="minbox">
        <div class="coloum">
            <div class="panel bar">
                <h2>柱形图行列</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图行列</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>饼行列</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>

        </div>
        <div class="coloum">
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>12456</li>
                        <li>10000</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>

            <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart"></div>

            </div>
        </div>
        <div class="coloum">
            <div class="panel bar2">
                <h2>柱形图行列</h2>
                <div class="chart">

                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel line2">
                <h2>柱形图行列</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie2">
                <h2>柱形图行列</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
    <script src="js/myindex.js"></script>

</body>

</html>

前端所需要的js

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
@font-face {
  font-family: electron;
  src: url(../font/DS-DIGIT.TTF);
}
body {
  background: url(../images/bg.jpg) no-repeat top center;
  line-height: 1.15;
}
header {
  height: 1.25rem;
  position: relative;
  background: url(../images/head_bg.png) no-repeat;
  background-size: 100% 100%;
}
header h1 {
  font-size: 0.457rem;
  color: white;
  text-align: center;
  line-height: 1rem;
}
header .showTime {
  position: absolute;
  right: 0.375rem;
  top: 0;
  line-height: 0.9375rem;
  font-size: 0.25rem;
  color: rgba(255, 255, 255, 0.7);
}
.minbox {
  display: flex;
  max-width: 1920px;
  min-width: 1080px;
  height: 7.5rem;
  padding: 0.125rem 0.125rem 0;
  margin: 0 auto;
}
.minbox .coloum {
  flex: 3;
}
.minbox .coloum:nth-child(2) {
  flex: 5;
  margin: 0 0.1875rem 0.125rem;
}
.minbox .panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  border: 1px solid rgba(255, 186, 139, 0.17);
  background: url(../images/line.png) rgba(255, 255, 255, 0.03);
}
.minbox .panel .chart {
  height: 3rem;
  background-color: pink;
}
.minbox .panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.25rem;
  color: #ffffff;
  font-weight: 400;
}
.minbox .panel::before {
  position: absolute;
  height: 0.125rem;
  width: 0.125rem;
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.minbox .panel::after {
  position: absolute;
  height: 0.125rem;
  width: 0.125rem;
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.minbox .panel .panel-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.minbox .panel .panel-footer::before {
  position: absolute;
  height: 0.125rem;
  width: 0.125rem;
  bottom: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.minbox .panel .panel-footer::after {
  position: absolute;
  height: 0.125rem;
  width: 0.125rem;
  bottom: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.no {
  background-color: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.255rem;
  height: 0.5rem;
  line-height: 0.5rem;
  margin-top: 0.125rem;
}
.no .no-hd {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
}
.no .no-hd ul {
  display: flex;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  text-align: center;
  font-family: electron;
}
.no .no-hd ul li:nth-child(1):after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}
.no .no-hd::after {
  position: absolue;
  height: 10px;
  width: 30px;
  right: 0;
  bottom: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: " ";
}
.no .no-hd::before {
  position: absolue;
  height: 10px;
  width: 30px;
  top: 0;
  left: 0;
  content: " ";
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.map {
  height: 10.125rem;
  position: relative;
}
.map .map1 {
  width: 6.475rem;
  height: 6.475rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/map.png);
  opacity: 0.3;
  background-size: 100% 100%;
}
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.375rem;
  height: 8.375rem;
  background: url(../images/lbx.png);
  background-size: 100% 100%;
  animation: rotaltal1 15s linear infinite;
  opacity: 0.3;
}
@keyframes rotaltal1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(../images/jt.png);
  background-size: 100% 100%;
  animation: rotaltal2  10s linear infinite;
  opacity: 0.3;
}
@keyframes rotaltal2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.125rem;
}

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
233
234
235
236
237
238
239
240

效果如下

2.3 echarts 使用

常见的数据可视化库

D3.js 目前web 端评价最高的javascript 可视化工具
Echart.js 百度出品的一个开源的javascript 数据可视化库--以及收入到apache
HighCharts.js 是国外的前端数据可视化库，非商用免费，许多国外大公司所用
AntV 蚂蚁金服全新一代的数据可视化解决方案

实例提供

https://echarts.apache.org/examples/zh/index.html#chart-type-bar

下载并引入echarts.js

页面下载

https://echarts.apache.org/zh/download.html

npm 安装

npm install echarts

引入js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

准备一个具备大小的盒子

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

初始化echarts 实例对象

var myChart = echarts.init(document.querySelector(".bar"));

制定配置项和数据

  // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

将配置项设置给echarts 实例对象

  // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

完整的demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

3. echarts 具体讲解

3.1 配置项讲解

全部的配置项网址

https://echarts.apache.org/zh/option.html#title

配置名	作用
title	设置图表的标题
tooltip	图表提示框组件
trigger	触发方式
legend	图例组件
grid	网格配置，图表不一样和容器一样大。可以控制线性图的大小
toolbox	工具箱
xAxis	X 轴
yAxis	Y 轴
series	系列图表配置，显示那种配置信息，其中type 信息决定了图的类型，pie 为饼图，line 折线图，bar 为柱状图
color	设置线条颜色，是数组

3.2 柱状图

引入相关js

// ()(); 这个是立即执行函数
(function() {
    var myCharts = echarts.init(document.querySelector(".bar .chart"));

    // 制定数据
    var option = {
        // 设置图表的信息
        color: ["#2f89cf"],
        tooltip: {
            // 这个是提示框信息
            trigger: "axis",
            // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        // 修改图表的大小
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true,
        },
        // 坐标轴信息
        xAxis: [{

            type: "category",
            data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
                "电商行业",
                "社交行业",
                "金融行业",
            ],
            axisTick: {
                alignWithLabel: true,
            },
            // 修改刻度标签相关样式
            axisLabel: {
                color: "rgba(255, 255, 255, .6)",
                fontSize: "12",
                interval: 0, //控制是否全部显示
            },
            // 不显示x轴的样式
            axisLine: {
                show: false,
            },
        }, ],
        yAxis: [{
            type: "value",
            // 修改刻度标签相关样式
            axisLabel: {
                color: "rgba(255, 255, 255, .6)",
                fontSize: "12",
            },
            // y轴坐标系
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                    width: 2,
                },
            },
            // y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, .1)",
                },
            },
        }, ],
        series: [{
            name: "直接访问",
            type: "bar",
            // 修改柱子的宽度
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
                // 修改柱子的圆角
                barBorderRadius: 5,
            },
        }, ],
    };
    // 把配置项给实列对象
    myCharts.setOption(option);

})();

3.3 折线图

(function() {
    var yearData = [{
            year: "2020", // 年份
            data: [
                // 两个数组是因为有两条线
                [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            ],
        },
        {
            year: "2021", // 年份
            data: [
                // 两个数组是因为有两条线
                [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34],
            ],
        },
    ];
    // 实列化对象
    var myChart = echarts.init(document.querySelector(".line .chart"));
    // 指定对象
    var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            trigger: "axis",
        },
        // 图列组件
        legend: {
            /* 如果series对象有name值，则legend可以不用写data */
            // 修改图列组件文字颜色
            textStyle: {
                color: "#4c9bfd",
            },
            right: "10%",
        },
        grid: {
            left: "3%",
            right: "4%",
            top: "20%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012F41", // 边框颜色
            containLabel: true, // 包含刻度文字在内
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
            ],
            axisTick: {
                show: false, //去除刻度线
            },
            axisLabel: {
                color: "#4c9bfd", // 文本颜色
            },
            axisLine: {
                show: false, // 去除轴线
            },
            boundaryGap: false,
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false, //去除刻度线
            },
            axisLabel: {
                color: "#4c9bfd", // 文本颜色
            },
            axisLine: {
                show: false, // 去除轴线
            },
            splitLine: {
                lineStyle: "#012f4a",
            },
        },
        series: [{
                name: "新增粉丝",
                type: "line",
                smooth: true, // 曲线是否平滑显示
                data: yearData[0].data[0],
            },
            {
                name: "新增游客",
                type: "line",
                smooth: true, // 曲线是否平滑显示
                data: yearData[0].data[1],
            },
        ],
    };
    // 把配置给实列对象
    myChart.setOption(option);
    // 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 点击切换显示数据
    $(".line h2").on("click", "a", function() {
        // 点击a之后，根据当前的a的索引号，找到对应的yearData的数据
        var obj = yearData[$(this).index()];
        option.series[0].data = obj.data[0];
        option.series[1].data = obj.data[1];
        // 重新渲染数据
        myChart.setOption(option);
    });
})();

3.4 饼状图

(function() {
    var myChart = echarts.init(document.querySelector(".pie .chart"));
    var option = {
        // 修改饼状图的颜色
        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],

        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            bottom: "0%",
            // 设置小图标的大小
            itemWidth: 10,
            itemHeight: 10,
            // 修改案列组件的文字和颜色
            textStyle: {
                color: "rgba(255, 255, 255, .5)",
                fontSize: "12",
            },
        },
        series: [{
            name: "年龄分布",
            type: "pie",
            radius: ["40%", "60%"], // 饼状图的大小
            // 设置饼状图位置
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            // 图形上的文字
            label: {
                show: false,
                position: "center",
            },
            // 链接文字和图形的线是否显示
            labelLine: {
                show: false,
            },
            data: [
                { value: 1, name: "0岁以下" },
                { value: 4, name: "20-29岁" },
                { value: 2, name: "30-39岁" },
                { value: 2, name: "40-49岁" },
                { value: 1, name: "50岁以上" },
            ],
        }, ],
    };
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

3.5 地图

在社区找自己想要的地图

https://www.makeapie.com/explore.html

首先要引入china.js文件

然后使用地图

(function() {
    var myChart = echarts.init(document.querySelector(".map .chart"));
    var geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028],
    };

    var XAData = [
        [{ name: "西安" }, { name: "北京", value: 100 }],
        [{ name: "西安" }, { name: "上海", value: 100 }],
        [{ name: "西安" }, { name: "广州", value: 100 }],
        [{ name: "西安" }, { name: "西宁", value: 100 }],
        [{ name: "西安" }, { name: "银川", value: 100 }],
    ];

    var XNData = [
        [{ name: "西宁" }, { name: "北京", value: 100 }],
        [{ name: "西宁" }, { name: "上海", value: 100 }],
        [{ name: "西宁" }, { name: "广州", value: 100 }],
        [{ name: "西宁" }, { name: "西安", value: 100 }],
        [{ name: "西宁" }, { name: "银川", value: 100 }],
    ];

    var YCData = [
        [{ name: "银川" }, { name: "北京", value: 100 }],
        [{ name: "银川" }, { name: "广州", value: 100 }],
        [{ name: "银川" }, { name: "上海", value: 100 }],
        [{ name: "银川" }, { name: "西安", value: 100 }],
        [{ name: "银川" }, { name: "西宁", value: 100 }],
    ];

    var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
    //var planePath = 'arrow';
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];

            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value,
                });
            }
        }
        return res;
    };

    var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
    var series = [];
    [
        ["西安", XAData],
        ["西宁", XNData],
        ["银川", YCData],
    ].forEach(function(item, i) {
        series.push({
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: "red", //arrow箭头的颜色
                symbolSize: 3,
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2,
                },
            },
            data: convertData(item[1]),
        }, {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15,
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2,
                },
            },
            data: convertData(item[1]),
        }, {
            name: item[0] + " Top3",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
                brushType: "stroke",
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    formatter: "{b}",
                },
            },
            symbolSize: function(val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i],
                },
                emphasis: {
                    areaColor: "#2B91B7",
                },
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                };
            }),
        });
    });
    var option = {
        tooltip: {
            trigger: "item",
            formatter: function(params, ticket, callback) {
                if (params.seriesType == "effectScatter") {
                    return "线路：" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return (
                        params.data.fromName +
                        ">" +
                        params.data.toName +
                        "<br />" +
                        params.data.value
                    );
                } else {
                    return params.name;
                }
            },
        },
        legend: {
            orient: "vertical",
            top: "bottom",
            left: "right",
            data: ["西安 Top3", "西宁 Top3", "银川 Top3"],
            textStyle: {
                color: "#fff",
            },
            selectedMode: "multiple",
        },
        geo: {
            map: "china",
            label: {
                emphasis: {
                    show: true,
                    color: "#fff",
                },
            },
            // 把中国地图放大了1.2倍
            zoom: 1.2,
            roam: true,
            itemStyle: {
                normal: {
                    // 地图省份的背景颜色
                    areaColor: "rgba(20, 41, 87, 0.8)",
                    borderColor: "#195BB9",
                    borderWidth: 1,
                },
                emphasis: {
                    areaColor: "#2B91B7",
                },
            },
        },
        series: series,
    };
    myChart.setOption(option);
    // 监听浏览器缩放
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();

echarts 教程

# echarts 教程

# 1. 简介

# 2. 入门

# 2.1 环境准备

# 2.2 入门demo

# 基础设置

# 2.3 echarts 使用

# 下载并引入echarts.js

# 准备一个具备大小的盒子

# 初始化echarts 实例对象

# 制定配置项和数据

# 将配置项设置给echarts 实例对象

# 3. echarts 具体讲解

# 3.1 配置项讲解

# 3.2 柱状图

# 3.3 折线图

# 3.4 饼状图

# 3.5 地图

echarts 教程

1. 简介

2. 入门

2.1 环境准备

2.2 入门demo

基础设置

2.3 echarts 使用

下载并引入echarts.js

准备一个具备大小的盒子

初始化echarts 实例对象

制定配置项和数据

将配置项设置给echarts 实例对象

3. echarts 具体讲解

3.1 配置项讲解

3.2 柱状图

3.3 折线图

3.4 饼状图

3.5 地图