Vue —— echarts 的使用方式

文章目录

• 一、什么是echarts？
• 二、使用步骤
  • 1.一般使用方式
  • 2..利用动态数据渲染图表
• 总结

---

一、什么是echarts？

echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、使用步骤

1.一般使用方式

1. 在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
2. 在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：

绘制一个简单的图表(完整代码)

效果图：

 

2.利用动态数据渲染图表

1. 从 npm 安装echarts   ——        npm install echarts --save
2. 在相应组件中引入excharts ——    import * as echarts from 'echarts';
3. 在页面结构中准备一个容器，用于承载echarts实例,一定要记得指定图标的高度
4. 基于准备好的实例，初始化echarts实例  —— var myChartLine = echarts.init(this.$refs.main);
5. 处理数据指定配置项和数据，例如对于一个折线图来说的x,y轴数据，以及图例等
6. 使用以上步骤的配置和数据显示图表 ——     myChartLine.setOption(option1);

代码示例： 以下主要讲解折线图，柱状图，饼状图的实现过程。

在页面结构中准备一个容器，用于承载echarts实例

基于准备好的实例，初始化echarts实例 ，并显示图表

  mounted() {
            // 获取后端数据
            getData().then((response) => {
                const { data } = response.data;
                // 获取表格的数据
                this.tableData = data.tableData;
                // 获取折线图的数据
                this.orderData = data.orderData;
                // 获取柱状图的数据
                this.userData = data.userData;
                // 获取饼状图的数据
                this.videoData = data.videoData;
                // 利用后端数据————生成echarts折线图
                // 基于准备好的dom，初始化echarts实例 
                var myChartLine = echarts.init(this.$refs.main);
                // 指定图表的配置项和数据
                var option1 = {};
                // 提示框
                option1.tooltip = {};
                // 整理数据得到 x 轴所要显示的数据
                const xAxis = this.orderData.date;
                option1.xAxis = { data: xAxis };
                // 整理数据得到 y 轴所要显示的数据
                option1.yAxis = {};
                // 整理数据得到图例
                const legend = Object.keys(this.orderData.data[0]);
                option1.legend = { data: legend };
                // 整理数据得到 每一个节点的值
                option1.series = []
                legend.forEach((key) => {
                    option1.series.push({
                        name: key,
                        type: 'line',
                        data: this.orderData.data.map((item) => {
                            return item[key]
                        })
                    })
                })
                // 使用刚指定的配置项和数据显示图表。
                myChartLine.setOption(option1);
                // 利用后端数据————生成echarts 柱状图
                var myChartBar = echarts.init(this.$refs.main1);
                var option2 = {
                    legend: {
                        // 图例文字颜色
                        textStyle: {
                            color: "#333",
                        },
                    },
                    // grid 组件离容器左侧的距离。
                    grid: {
                        left: "20%",
                    },
                    // 提示框
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category", // 类目轴
                        data: this.userData.map((item) => {
                            return item.date;
                        }),
                        // 坐标轴轴线相关配置
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                        // 坐标轴刻度标签的相关设置
                        axisLabel: {
                            // 坐标轴刻度标签的显示间隔，在类目轴中有效
                            interval: 0,
                            color: "#333",
                        },
                    },
                    yAxis: [
                        {
                            type: "value",
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3",
                                },
                            },
                        },
                    ],
                    color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
                    series: [
                        {
                            name: '新增用户',
                            type: 'bar',
                            data: this.userData.map(item => item.new)
                        },
                        {
                            name: '活跃用户',
                            type: 'bar',
                            data: this.userData.map(item => item.active)
                        }
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChartBar.setOption(option2);
                // 利用后端数据————生成echarts 柱状图
                var myChartPie = echarts.init(this.$refs.main2);
                var option3 = {
                    tooltip: {
                        trigger: "item",
                    },
                    color: [
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series: [
                        {
                            type: 'pie',
                            // data: [
                            //     { value: 1048, name: 'Search Engine' },
                            //     { value: 735, name: 'Direct' },
                            //     { value: 580, name: 'Email' },
                            //     { value: 484, name: 'Union Ads' },
                            //     { value: 300, name: 'Video Ads' }
                            // ],
                            // 如上所示，饼状图的数据格式和后端返回数据相同，因此可以直接使用
                            data: this.videoData
                        }
                    ],
                };
                // 使用刚指定的配置项和数据显示图表。
                myChartPie.setOption(option3);
            })
        },

效果图