菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >数据库 >

使用echart完成折线图

使用echart完成折线图

效果图:

image-20200910163410797

上代码:

<template><div><div id="demo"></div></div></template><script>export default {data() {return {option: {title: {text: "设备增长", //标题设置‘参保情况’// subtext: "纯属虚构",left: "center", //标题位置},tooltip: {//鼠标hover覆盖提示框trigger: "axis", //坐标线提示// trigger: "item", //根据item提示信息// formatter: "{b} : {c} ", //提示内容},legend: {bottom: "5%",data: ["在线", "总数"],},xAxis: {axisTick: {show: false, //不显示坐标轴刻度线},axisLine: {show: false, //不显示坐标轴线},type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {axisTick: {show: false, //不显示坐标轴刻度线},axisLine: {show: false, //不显示坐标轴线},type: "value",// splitLine: {// show: false, //不显示网格线// },},grid: {left: "5%",right: "5%",bottom: "20%",containLabel: true,},series: [{name: "在线", //设置名称,跟数据无相关性hoverAnimation: true, //鼠标悬停效果,默认是truedata: [{ value: 335, name: "设备1" },{ value: 310, name: "设备2" },{ value: 234, name: "设备3" },{ value: 135, name: "设备4" },{ value: 1548, name: "设备5" },],type: "line",},{name: "总数",data: [220, 222, 333, 222, 444, 222, 444],type: "line",},],},};},mounted() {// 这个方法不能放在greated生命周期,因为那时候dom还没初始化完成this.echarts();},methods: {echarts() {// 引入 ECharts 主模块var echarts = require("echarts/lib/echarts");// 引入柱状图(这个例子可以去掉)require("echarts/lib/chart/bar");// 引入提示框和标题组件require("echarts/lib/component/tooltip");require("echarts/lib/component/title");// 基于准备好的dom,初始化echarts实例var myChart1 = echarts.init(document.getElementById("demo"));// 绘制饼图myChart1.setOption(this.option);// 绘制折线图},},};</script><style lang="scss">#demo {width: 500px;height: 300px;}</style>

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。