ECharts的使用方法-阿里云开发者社区

ECharts的使用方法

2023-07-26 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ECharts的使用方法

效果图：

摘要：

在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。

一、安装，项目引入

npm install echarts --save

使用流程

1.安装插件 → 2.引入Echarts → 3.创建图表 → 4.修改样式 → 5.接入数据

二、Echarts 基本使用的五个步骤

1、引入 Echarts 文件

2、创建一个容器（必须有宽高）

3、获取 DOM 元素（容器），初始化 Echarts 实例

4、指定图表的配置项和数据

5、使用配置项和数据渲染图表（渲染到容器中）

三、在vue中使用

<template>
    <div id="two" style="width: 100%; height: 300px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import { twoo } from "../../../api/compoents";
export default {
    data() {
        return {
        }
    },
    mounted() {
        this.$nextTick(() => {
            twoo()
            .then((res) => {
                this.two(res.data.peopleNum, res.data.ok, res.data.no)
            })
            .catch((err) => {
                console.log(err)
            })
        })
    },
    methods: {
        two(aa,bb,cc) {
            let chartDom = document.getElementById('two');
            let myChart = echarts.init(chartDom);
            let option;
            option = {
                title: {
                    text: "“世界“电影之都”电影展映",
                    right: "center",
                    top: "20px",
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    data: [
                        '确定参加',
                        '暂不确定',
                        '全部'
                    ],
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            position: 'inner',
                            fontSize: 14
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: bb, name: '确定参加' },
                            { value: cc, name: '暂不确定' },
                            // { value: 679, name: 'Marketing', selected: true }
                        ]
                    },
                    {
                        name: '',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30
                        },
                        data: [
                            { value: aa, name: '全部' },
                        ]
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    },
}
</script>
<style scope></style>

三、关键内容，属性直接属于option

Documentation - Apache ECharts

title：标题组件，包含主标题和副标题

color：全局调色盘

grid：网格布局

xAxis：直角坐标系 grid 中的 x 轴

yAxis：直角坐标系 grid 中的 y 轴

dataset：数据集

visualMap：把数据的哪个维度映射到什么视觉元素上

最后的效果图如下：