文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中如何使用echarts

2023-07-05 01:00

关注

这篇文章主要介绍“vue中如何使用echarts”,在日常操作中,相信很多人在vue中如何使用echarts问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中如何使用echarts”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

使用方法:1、用“yarn add echarts”或“npm install echarts -S”或“cnpm install echarts -S”命令安装Echarts;2、在main.js中用“import echarts from 'echarts' Vue.prototype.$echarts = echarts”进行引入;3、在vue页面中调用相关api即可。

Echarts 商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue。

简单起步

安装 Echarts

      以下几种安装方式择其一

      本项目安装的是采用的yarnecharts 版本号是 4.8.0

// yarnyarn add echarts// npmnpm install echarts -S// cnpmcnpm install echarts -S

全局引入

      在main.js中

import echarts from 'echarts'Vue.prototype.$echarts = echarts

      到了这一步说明你已经把准备工作做完了

清空多余代码

      我们先把页面其他不需要用到的代码给清除吧

<template>  <div class="home"></div></template><script>export default {name: 'Home',}</script>

创建一个容器

创建一个 id 为EChart 的div 作为容器 (使用id会有个小问题,在最后解答)

<div id="EChart" style="width: 300px; height: 300px;"></div>

创建一个方法

getRenderer() {      console.log(this.$echarts);      // 基于准备好的dom,初始化echarts实例      let EChart = this.$echarts.init(document.getElementById("EChart"));      // 配置参数      let config = {        title: { text: "悲伤日记" },        tooltip: {},        xAxis: {          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],        },        yAxis: {},        series: [          {            name: "销量",            type: "bar",            data: [5, 20, 36, 10, 10, 20],          },        ],      };      // 设置参数    EChart.setOption(config);},

生命周期中调用此方法

mounted() {    // 在生命周期中调用 getRenderer 方法    this.getRenderer();},

请看大屏幕

vue中如何使用echarts

      吃瓜群众:“这特么不是官方示例么?能不能炫一点”

      严老师:“说实话确实有点low ,不要慌这才哪到哪呢,我们先从基础讲堂开始嘛”

先了解其参数

      先讲讲其中简单的一些配置参数,枯燥乏味,但是摸清楚之后,以后画图那是顺手得一**

      先整点简单、常用的来看看(备注里面皆是对应API地址)

参数名作用备注
title作为图表名称https://echarts.apache.org/zh/option.html#title
legend作为图表的标记https://echarts.apache.org/zh/option.html#legend
xAxis作为图表的X轴https://echarts.apache.org/zh/option.html#xAxis
yAxis作为图表的Y轴https://echarts.apache.org/zh/option.html#yAxis
series作为图表的系列https://echarts.apache.org/zh/option.html#series
color作为图表的颜色列表https://echarts.apache.org/zh/option.html#color

      掰扯了这么多,估计大家心里也没个底,实战一下吧

来造作一下下

series type

来吧!!展示

折线图

      修改折线图,复制上面的config代码

      只用修改一处地方,那就是series 中的type属性为line即可

let config = {   title: { text: "悲伤日记" },   tooltip: {},   xAxis: {      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],    },    yAxis: {},    series: [       {            name: "销量",            type: "line",            data: [5, 20, 36, 10, 10, 20],       },    ],};

vue中如何使用echarts
饼状图

      饼状图,我们也来看看,将type修改为pie

      当然我们需要把多余的X轴Y轴配置删除咯,data数据格式也需要修改一下

let config = {    tooltip: {},    legend:{       data : ["严","老","湿"]    },    series: [       {          name: "销量",          type: "pie",          data: [              {value:20,name:"严"},              {value:10,name:"老"},              {value:15,name:"湿"}          ],        },    ],};

vue中如何使用echarts
仪表盘

      仪表盘将 type 修改为 gauge

let config = {    series: [       {         name: "销量",         type: "gauge",         data: [50],       },    ],};

vue中如何使用echarts

      嗯~ 看起来有那么一点味道了

画一个老严的脸

let config = {      series: [          {            name: "销量",            type: "funnel",            data: [                 {value: 60, name: '访问'},                 {value: 40, name: '咨询'},                 {value: 20, name: '订单'},                 {value: 80, name: '点击'},                 {value: 100, name: '展现'}              ]           },     ],};

vue中如何使用echarts

哈哈哈  倒三角就是老严的脸了 (脑补一下下)

legend

刚刚其实我们已经用到了这个参数噢    ps:饼状图

vue中如何使用echarts

legend 可以作为图表的标记或颜色的名称描述(专业名词:图例)

它的type有两个参数plain || scroll

默认为plain 当图表内容比较丰富的时候可以使用 scroll 可以带有滚动操作

color

      都说颜色是Web的灵魂所在,每一个人都是画手

      官方默认配色 :

['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

      我们也可以自己修改颜色,规则是按数据对应的indexcolor颜色

例如这样:

let config = {     color:["red","blue","yellow"],    legend:{            data : ["严","老","湿"]    },    series: [            {               name: "销量",               type: "pie",               data: [                    {value:20,name:"严"},                    {value:10,name:"老"},                    {value:15,name:"湿"}               ],          },    ],};

yAxis

我们还是以线条为参考8

先看看基础篇,我们在y轴声明了一个name

let config = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis:[ {        name:"销量",        type: 'value'    }],    series: [{        name:'销量',        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        smooth: true    }]};

vue中如何使用echarts

但是有时候呢,我们会根据需求,要做一个双Y轴,顾名思义双Y轴,在加一个Y轴就好了

let config = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis:[ {        name:"l",        type: 'value'    }, {        name:"r",        type: 'value'    }],    series: [{        name:'l',        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        smooth: true    },    {        name:'r',        data: [20, 10, 60, 100, 300, 600, 800],        type: 'bar',    }]}

vue中如何使用echarts

xAxis

x轴与y轴基本同理,直接改成数组就成为双x轴了

let config = {    xAxis: [{        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },{        type: 'category',        data: ['0', '1', '2', '3', '4', '5', '6']    }],    yAxis:[{        name:"l",        type: 'value'    }, {        name:"r",        type: 'value'    }],    series: [{        name:'l',        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        smooth: true    },    {        name:'r',        data: [20, 10, 60, 100, 300, 600, 800],        type: 'bar',    }]};

vue中如何使用echarts

到了上面基础篇也就差不多了

使用id为问题所在

其实我们讲了这么多,我们梳理梳理最开始的问题

答案:使用ref,因为vue是单页面,使用id出现 重名会导致渲染问题

具体怎么使用我们来看看

<div ref="EChart" style="width: 300px; height: 300px;"></div>
// 同样的初始化参数 但是我们此次使用的是ref let EChart = this.$echarts.init(this.$refs.EChart)// 配置参数let config = {    xAxis: [{        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },{        type: 'category',        data: ['0', '1', '2', '3', '4', '5', '6']    }],    yAxis:[{        name:"l",        type: 'value'    }, {        name:"r",        type: 'value'    }],    series: [{        name:'l',        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: 'line',        smooth: true    },    {        name:'r',        data: [20, 10, 60, 100, 300, 600, 800],        type: 'bar',    }]};// 设置参数EChart.setOption(config);

到此,关于“vue中如何使用echarts”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯