纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue echarts可视化组件 Vue使用echarts可视化组件的方法

你就叫酱油   2021-07-28 我要评论
想了解Vue使用echarts可视化组件的方法的相关内容吗,你就叫酱油在本文为您仔细讲解Vue echarts可视化组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,echarts可视化组件,Vue,可视化组件,下面大家一起来学习吧。

echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html

1.找到脚手架项目所在地址,执行cnpm install echarts,安装echarts组件(脚手架的地址就是你vue项目的地址)

(E:\demo\vuepro)这是我的项目地址,vuepro为项目名

2.按需导入,以加快打开速度

//引入echarts组件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

3.准备div标签 容纳报表图形

div的 id用于绑定echarts插件

 <div id="chart" style="width: 50%; height: 400px;">
 </div>

4.script标签的内容

//引入echarts组件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return{
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt=document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Examples中的模板
                    )

                  }
                },
                mounted(){
                    this.initData()
                }
             }

为了方便大家的使用,我在这里放一个在Vue中引入echarts可视化组件的完整模板,大家直接复制使用即可

<template>
    <div id="boss" style="width: 500px;height: 500px;">
        
    </div>
</template>

<script>
    //引入echarts组件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return{
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt=document.querySelector("#boss")
            
                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Examples中模板
                    )
            
                  }
                },
                mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

案例:

<template>
    <div id="boss" style="width: 500px;height: 500px;">

    </div>
</template>

<script>
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return{
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt=document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                    //以下为echarts可视化组件
                      {
                          tooltip: {
                              trigger: 'axis',
                              axisPointer: {            // Use axis to trigger tooltip
                                  type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                              }
                          },
                          legend: {
                              data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
                          },
                          grid: {
                              left: '3%',
                              right: '4%',
                              bottom: '3%',
                              containLabel: true
                          },
                          xAxis: {
                              type: 'value'
                          },
                          yAxis: {
                              type: 'category',
                              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                          },
                          series: [
                              {
                                  name: 'Direct',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [320, 302, 301, 334, 390, 330, 320]
                              },
                              {
                                  name: 'Mail Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [120, 132, 101, 134, 90, 230, 210]
                              },
                              {
                                  name: 'Affiliate Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [220, 182, 191, 234, 290, 330, 310]
                              },
                              {
                                  name: 'Video Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [150, 212, 201, 154, 190, 330, 410]
                              },
                              {
                                  name: 'Search Engine',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis: {
                                      focus: 'series'
                                  },
                                  data: [820, 832, 901, 934, 1290, 1330, 1320]
                              }
                          ]
                      }
                      //组件到此结束
                    )

                  }
                },
                mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

显示效果:


相关文章

猜您喜欢

  • c++ malloc底层 c++中的malloc底层实现代码

    想了解c++中的malloc底层实现代码的相关内容吗,黑猫爱小鹿在本文为您仔细讲解c++ malloc底层的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:c++,malloc底层,c++,malloc,下面大家一起来学习吧。..
  • MyBatis延迟加载与立即加载 MyBatis延迟加载与立即加载案例教程

    想了解MyBatis延迟加载与立即加载案例教程的相关内容吗,小小张自由—>张有博在本文为您仔细讲解MyBatis延迟加载与立即加载的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:MyBatis延迟加载,MyBatis立即加载,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.freefLashonLinegames.com 【木头下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式