echarts移动端中例子总结

Echarts 是一个强大的数据可视化工具，它采用了很多现代化的技术与框架。在移动端方面，Echarts同样有众多实用的例子，可以帮助我们根据不同的需求来快速构建符合各种需求的图表。

移动端echarts使用的优点

在移动端使用 Echarts，可以带来许多好处：

• 移动端的宽度远远小于笔记本电脑或台式电脑的宽度，这意味着我们必须针对如此狭小的屏幕尺寸进行优化。
• 移动端的触摸控制交互也非常自然，我们可以自定义事件响应，让 Echarts 响应我们想要的事件，并实现交互动作。
• 移动端网速可能较慢，如果数据量特别大，常规折线图\柱状图等简单图表可能加载较慢。但是 Echarts 优异的数据可压缩性使得 Echarts 图表即使放在移动端，仍可以实现高效的数据呈现，响应用户需求。

因为这些优点，开发移动端的图表几乎变成标配，也成为很多前端工程师的必备技能之一。

几个移动端例子

接下来我们来看几个针对移动端的实际例子，并以此为基础了解 Echarts 在移动端数据可视化方面的优势。

1. 常规折线图

这是一个十分常见的需求，因为线条在移动端设备上的表现效果十分好。我们可以轻松地读取折线图，并可使用手势来内外缩放和滑动查看。

比如，对于已知的一个时间序列点和对应的数值点数据，我们可以使用 Echarts 实现这个图表，代码示例如下所示：

option = {
    xAxis: {
        type: 'category',
        data: ['2019.01', '2019.02', '2019.03', '2019.04', '2019.05', '2019.06', '2019.07']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [20, 30, 25, 40, 25, 30, 35],
        type: 'line'
    }]
};

2. 科技指标图表

科技指标图表是一个显示每项指标的百分比的图表，我们可以设置横向轴的宽度和颜色，以及每个项目所占百分比的颜色。对于移动端，这种指标图表也显得非常实用。

下面给出一个具体的问题：如果需要在移动端实现电影评价的“烂番茄”指数图表，一个常用的样式是环形和分段，比例越高那部电影就越好。我们可以使用 Echarts 图表实现：

option = {
    series: [
        {
            type: 'pie',
            radius: [25, 45],
            avoidLabelOverlap: false,
            itemStyle: {
                normal: {
                    color: '#007aff'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'center'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {
                    value: 60,
                    itemStyle: {
                        normal: {
                            color: '#b6c5f5'
                        }
                    }
                },
                {
                    value: 40,
                    itemStyle: {
                        normal: {
                            color: '#007aff'
                        }
                    }
                }
            ]
        }
    ]
};

3. 地图

我们在移动端也可以使用 Echarts 很容易地实现地图，而且地图在移动端上有着许多实用性和实现性。例如，我们可以利用地图在移动端上显示商店或机构的位置和商圈等信息。我们可以使用 Echarts 实现一个中国地图：

option = {
    tooltip: {
        show: true
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['High', 'Low'],
        seriesIndex: [1],
        inRange: {
            color: ['#EE9A49', '#F6BD16', '#58D09D', '#0166FF', '#6B5AE5']
        },
        calculable: true
    },
    grid: {
        bottom: 60,
        left: '5%',
        right: '10%'
    },
    xAxis: {
        type: 'category',
        axisLine: {
            show: false
        },
        axisLabel: {
            rotate: 45,
            interval: 0,
            textStyle: {
                fontSize: 12
            }
        },
        data: ['北京', '天津', '上海', '重庆', '河北', '辽宁', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南']
    },
    yAxis: {
        name: '单位(万)',
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            textStyle: {
                fontSize: 12
            }
        }
    },
    series: [
        {
            name: 'Top 5',
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barGap: '20%',
            barWidth: 20,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true,
                    position: 'insideTop'
                }
            },
            data: [103.3, 118.5, 56.2, 68.6, 43.8]
        },
        {
            name: '数据来源于指标分析和网络分析',
            type: 'map',
            map: 'china',
            data: [
                {
                    name: '北京',
                    value: 50
                },
                {
                    name: '天津',
                    value: 150
                },
                {
                    name: '上海',
                    value: 300
                },
                {
                    name: '重庆',
                    value: 200
                },
                {
                    name: '河北',
                    value: 50
                },
                {
                    name: '辽宁',
                    value: 100
                },
                {
                    name: '黑龙江',
                    value: 30
                },
                {
                    name: '江苏',
                    value: 150
                },
                {
                    name: '浙江',
                    value: 250
                },
                {
                    name: '安徽',
                    value: 100
                },
                {
                    name: '福建', 
                    value: 100
                },
                {
                    name: '江西',
                    value: 50
                },
                {
                    name: '山东',
                    value: 100
                },
                {
                    name: '河南',
                    value: 75
                },
                {
                    name: '湖北',
                    value: 200
                },
                {
                    name: '湖南',
                    value: 150
                },
                {
                    name: '广东',
                    value: 600
                },
                {
                    name: '海南',
                    value: 25
                },
                {
                    name: '四川',
                    value: 200
                },
                {
                    name: '贵州', 
                    value: 50
                },
                {
                    name: '云南',
                    value: 75
                }
            ]
        }
    ]
};

结论

Echarts 在移动端的数据可视化方面拥有广阔的空间。它可以通过简单的代码实现非常酷炫的图表，因为它支持众多的图形方式，而且能够快速地进行交互和动画。因此，在移动端，我们不应忽视这个强大的工具。