ECharts总结

最新推荐文章于 2025-04-09 18:53:27 发布

原创最新推荐文章于 2025-04-09 18:53:27 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #javascript

这篇博客主要介绍了ECharts的初步实现步骤以及常用配置项，包括title、legend和tooltip的详细设置，以及series中各种图表类型的使用，特别提到了带有涟漪特效的散点图。此外，还提及了L7库的基本安装和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts总结

一.初步实现echarts

1.npm install echarts --save

2.import * as echarts from 'echarts';

<div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>

<template>
    <div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: 'HelloWorld',
        mounted() {
           this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.myEchart);
                var option = {
                    title: {
                        text: 'ECharts 入门示例',
                        show:true,
                        link:'http://www.baidu.com',
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
                myChart.setOption(option);
            }
        }
    }
</script>

二.常用option的使用

1.title

title: { text: "Main Title",标题 subtext: "Sub Title",副标题文本， left: "center", title 组件离容器左侧的距离。 top: "center",title 组件离容器顶部的距离。 textStyle: {样式 fontSize: 30, color: "rgba(143, 19, 19, 1)" }, subtextStyle: {副标题样式 fontSize: 20 } }

2.legend

图例组件。

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: { type: 'scroll', 'plain'：普通图例。缺省就是普通图例 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用 orient: 'vertical', 滚动图例（垂直）或滚动图例（水平）。 right: 10,图例组件离容器右侧的距离。 top: 20, bottom: 20, data: data.legendData 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name },

3.tooltip

图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}
<template>
    <div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: 'HelloWorld',
        mounted() {
            this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.myEchart);
                var option = option = {
                    color: ["#003366", "#006699", "#4cabce", "#e5323e"],
                    dataset: {
                        source: [
                            ["type", "2012", "2013", "2014", "2015", "2016"],
                            ["Forestwerwerwerwerwewefwefwe", 650, 332, 301, 334, 390],
                            ["Steppesdfsdfsfsdf", 220, 182, 191, 234, 290],
                            ["Desert", 150, 232, 201, 154, 190],
                            ["Wetland", 98, 77, 101, 99, 40]
                        ]
                    },
                    legend: {
                        formatter: function(name) {
                            return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
                        },
                        tooltip: {
                            show: true
                        }
                    },
                    xAxis: {
                        type: "category",
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {},
                    series: [{
                        type: "bar",
                        seriesLayoutBy: "row"
                    }, {
                        type: "bar",
                        seriesLayoutBy: "row"
                    }, {
                        type: "bar",
                        seriesLayoutBy: "row"
                    }, {
                        type: "bar",
                        seriesLayoutBy: "row"
                    }]
                }
                myChart.setOption(option);
            }
        }
    }
</script>

4.series

系列主要是放置柱状图折线图饼图环形图等

<template>
    <div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: 'HelloWorld',
        mounted() {
            this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.myEchart);
                var option = {
                    legend: {
                        orient: "vertical",
                        left: "left",
                        data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
                    },
                    series: [{
                        type: "pie",
                        data: [{
                            value: 335,
                            name: "Apple"
                        }, {
                            value: 310,
                            name: "Grapes"
                        }, {
                            value: 234,
                            name: "Pineapples"
                        }, {
                            value: 135,
                            name: "Oranges"
                        }, {
                            value: 1548,
                            name: "Bananas"
                        }]
                    }]
                }
                myChart.setOption(option);
            }
        }
    }
</script>

4.series-effectScatter

带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

<template>
    <div class="map" ref="myEchart" style="width: 800px;height:600px;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: 'HelloWorld',
        mounted() {
            this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(this.$refs.myEchart);
                var option = {
                    xAxis: {},
                    yAxis: {
                        scale: true
                    },
                    series: [{
                        name: "1990",
                        type: "effectScatter",
                        data: [
                            [38604, 77, 1709686944],//y x 大小
                            [37062, 75.4, 252847810]
                        ],
                        symbolSize: function(data) {
                            return Math.sqrt(data[2]) / 5e2;
                        },
                        colorBy: "data", //每个颜色根据data不一样
                        rippleEffect: {
                            brushType: "stroke" //波纹的绘制方式
                        }
                    }]
                }
                myChart.setOption(option);
            }
        }
    }
</script>

L7的基本使用

1.npm i @antv/l7 @antv/l7-maps --save

<template>
    <div id="userMap"></div>
</template>

<script>
    import {
        Scene,
    } from '@antv/l7'
    import {
        GaodeMap
    } from '@antv/l7-maps'
    export default {
        name: 'HelloWorld',
        mounted() {
            this.initUserMap()
        },
        methods: {
            initUserMap() {
                new Scene({
                    id: 'userMap',
                    map: new GaodeMap({
                        pitch: 0,
                        style: 'dark',
                        mapStyle: 'amap://styles/darkblue',
                        center: [113.631419, 34.753439],
                        zoom: 4
                    })
                });
            }
        }

    }
</script>