vue简单使用echarts

news/2024/7/10 2:00:48 标签: vue, js
  • 安装引入

// 安装Echats
npm install echarts --save
// 引入
import echarts from 'echarts'
  • html部分

<div id="chartLineBox" style="width: 90%;height: 70vh;"></div>
methods: {
            // 按需搜索
            search(formData) {                       
            //请求后台数据      
                countStatistics(formData).then((res) => {
                    this.dateList = [];
                    this.countData = [];
                    let arr = res.data.data;
                    // 调用方法生成
                    this.createEcharts(arr);
                })
            },
			成echarts表格
            createEcharts(data) {
                let arr = data;
                arr.forEach((item) => {
                    this.dateList.push(item.modifiedTime);
                    this.countData.push(item.resultCount);
                });      
                this.chartLine = echarts.init(document.getElementById('chartLineBox'));
                let _this = this;
                let option = {
                    legend: {               //设置区分(哪条线属于什么)
                        data: ['检验数量', '合格数量']
                    },
                    color: ['#e21335', '#0078c4'],       //设置区分(每条线是什么颜色,和 legend 一一对应)
                    tooltip: {
                        trigger: "axis"
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        name: '日期',
                        nameTextStyle: {
                            // color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        type: "category",
                        boundaryGap: false,
                        // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
                        data: _this.dateList
                    },
                    yAxis: {
                        name: '数量',
                        nameTextStyle: {
                            // color: '#FA6F53',
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#000000',
                            }
                        },
                        type: "value"
                    },
                    series: [
                        {
                            name: '检验数量',
                            type: "line",
                            stack: "总量",
                            data: _this.countData
                        },                     
                    ]
                };
                this.chartLine.setOption(option);

            },
        },

http://www.niftyadmin.cn/n/1342612.html

相关文章

生成 makefile

为什么80%的码农都做不了架构师&#xff1f;>>> 学习 makefile 之余&#xff0c;突增一种用 shell 脚本生成 makefile 的意思&#xff0c;于是试了试。 在写 shell 脚本时&#xff0c;自己又想着能够多用一些 shell 脚本的知识&#xff0c;以锻炼自己的所学&#x…

vue项目中axios的封装、拦截及使用

创建constant.js文件保存baseUrl 创建constant.js(随意) 保存baseUrl var baseUrl process.env.NODE_ENV production ? http://生产环境地址 : http://开发环境地址 export default baseUrl创建request.js文件创建请求 创建request.js // 引入axios import axios from axi…

layui common

一、 <% page contentType"text/html;charsetUTF-8" language"java" %><% taglib uri"http://java.sun.com/jsp/jstl/core" prefix"c"%><% taglib uri"http://java.sun.com/jsp/jstl/fmt" prefix"fmt&q…

html css旋转魔方 gif背景图

平时休息时做的css小游戏html <div id"all"><div class"title"><div style"width: 80%; margin: 0 auto; text-align: center">good good study day day up</div></div><div class"wrap" style&q…

Jenkins 搭建 .NET Core 持续集成环境

关于c#的.Net FrameWork 的集成环境以及MsBuild的配置可以看 jenkins搭建.NET FrameWork持续集成环境 这篇文章 关于.NET Core 这个项目我搭了很久 其实很简单 因为不懂.NET FrameWork 和.NetCore 所以走了很大的弯 我们用NuGet还原.NET Core项目会报以下错误&#xff1a; erro…

vue 日历插件ele-calendar

由于项目中需要一个日历功能我比较懒不想自己写所以就找了一插件,不过样式不符合要求自己又改了一下。 原版样式修改后样式全局引入 npm install ele-calendar组件中使用 //html部分 <template><div><div style"width: 335px;height: 600px;margin: 30p…

怎样在文章末尾添加尾注(将尾注的数字变为方括号加数字)

在进行文章编写或者需要添加注解时&#xff0c;需要进行尾注的添加&#xff0c;下面将详细说明如何进行尾注的添加 操作 首先打开需要进行添加尾注的文档&#xff0c;将光标移动至需要进行添加尾注的文字后。 紧接着在上方工具栏中&#xff0c;选择引用&#xff0c;在引用页…

《Effective C++第三版》读书笔记——设计与声明

4 设计与声明 ~~~~~~~~~~~~~ 4.1 让接口容易被正确使用,不易被误用 1. 许多客户端错误可以因为导入新类型而获得预防. 一旦使用了新类型,限制其值就顺其自然了. 2. 任何接口如果要求客户必须记得做某事,就是有着不正确使用的倾向,因为客户可能会忘记做那件事. 4…