首页 前端知识 Vue2.0 使用 echarts

Vue2.0 使用 echarts

2024-02-02 09:02:54 前端知识 前端哥 711 711 我要收藏

目录

  • 1. 配置 + 渲染
  • 2. 数据渲染

1. 配置 + 渲染

  1. 安装 echarts 依赖

    npm install echarts -S
    
  2. main.js,引入 echarts

    import * as echarts from 'echarts'// 在import的后面,echarts的前面加一个 * as
    Vue.prototype.$echarts = echarts
    
  3. 从 echarts 官网直接复制一个案例,放到 data 里面,如图:

  4. template 中定义一个 div ,作为显示圆盘的载体

  5. 在 method 中定义初始化 echarts 的方法

    methods: {
      showPan () {
        // 指定 echarts 图表初始化的容器
        const panCharts = this.$echarts.init(document.querySelector('#pan'))
        // 渲染 echarts
        panCharts.setOption(this.panOption,true)
      }
    }
    
  6. 在 mounted 钩子函数中调用初始化 echarts 图表的方法

    mounted() {
      this.showPan()
    },
    
  7. 效果图如下

2. 数据渲染

到此,我们肯定要用自己的数据去渲染 echarts 图表,即上述案例中的 title、legend、series 都必须由我们自己的数据来渲染。这里就附上前后端代码了,因为操作比较简单,就简单说一下思路。

  1. 通过一些函数获取后端数据,并替换掉数据字段(title、legend、series,一般 title、legend 都会写死,只会更改 series 对象里面的 data 数组,如下)
    /* 将饼图数据数组中的值赋值给饼图的data */
    this.panOption.series[0].data = innerPayData
    this.panOption.series[1].data = outterPayData
    
  2. 调用初始化(渲染)echarts 图表的函数,重新渲染表格
    this.showPan()
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1123.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!