ECharts的使用方法

大可-

已于 2023-04-13 18:01:10 修改

阅读量679

点赞数 4

文章标签： echarts 前端 javascript

于 2023-04-13 13:31:38 首次发布

本文链接：https://blog.csdn.net/m0_55333789/article/details/130128285

版权

效果图：

摘要：

在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍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>