• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
戏做顿 显示全部楼层 发表于 2021-8-14 14:53:02 |阅读模式 打印 上一主题 下一主题
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html
1.找到脚手架项目地点地址,执行cnpm install echarts,安装echarts组件(脚手架的地址就是你vue项目的地址)

(E:\demo\vuepro)这是我的项目地址,vuepro为项目名
2.按需导入,以加快打开速率
  1. //引入echarts组件
  2.     import echarts from "echarts"
  3.     // 引入基本模板
  4.     let echart = require('echarts/lib/echarts')
  5.     // 引入柱状图组件
  6.     require('echarts/lib/chart/bar')
  7.     // 引入提示框和title组件
  8.     require('echarts/lib/component/tooltip')
  9.     require('echarts/lib/component/title')
复制代码
3.准备div标签 容纳报表图形
div的 id用于绑定echarts插件
  1. <div id="chart" style="width: 50%; height: 400px;">
  2. </div>
复制代码
4.script标签的内容
  1. //引入echarts组件
  2.     import echarts from "echarts"
  3.     // 引入基本模板
  4.     let echart = require('echarts/lib/echarts')
  5.     // 引入柱状图组件
  6.     require('echarts/lib/chart/bar')
  7.     // 引入提示框和title组件
  8.     require('echarts/lib/component/tooltip')
  9.     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可视化组件的完整模板,各人直接复制利用即可
  1. <template>    <div id="boss" style="width: 500px;height: 500px;">            </div></template><script>    //引入echarts组件
  2.     import echarts from "echarts"
  3.     // 引入基本模板
  4.     let echart = require('echarts/lib/echarts')
  5.     // 引入柱状图组件
  6.     require('echarts/lib/chart/bar')
  7.     // 引入提示框和title组件
  8.     require('echarts/lib/component/tooltip')
  9.     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>
复制代码
案例:
  1. <template>
  2.     <div id="boss" style="width: 500px;height: 500px;">
  3.     </div>
  4. </template>
  5. <script>
  6.     import echarts from "echarts"
  7.     // 引入基本模板
  8.     let echart = require('echarts/lib/echarts')
  9.     // 引入柱状图组件
  10.     require('echarts/lib/chart/bar')
  11.     // 引入提示框和title组件
  12.     require('echarts/lib/component/tooltip')
  13.     require('echarts/lib/component/title')
  14.             export default{
  15.                 name: 'App',
  16.                 data(){
  17.                   return{
  18.                      chartColumn:null
  19.                   }
  20.                 },
  21.                 methods:{
  22.                   initData(){
  23.                     let dt=document.querySelector("#boss")
  24.                     this.chartColumn=echart.init(dt)
  25.                     this.chartColumn.setOption(
  26.                     //以下为echarts可视化组件
  27.                       {
  28.                           tooltip: {
  29.                               trigger: 'axis',
  30.                               axisPointer: {            // Use axis to trigger tooltip
  31.                                   type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
  32.                               }
  33.                           },
  34.                           legend: {
  35.                               data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
  36.                           },
  37.                           grid: {
  38.                               left: '3%',
  39.                               right: '4%',
  40.                               bottom: '3%',
  41.                               containLabel: true
  42.                           },
  43.                           xAxis: {
  44.                               type: 'value'
  45.                           },
  46.                           yAxis: {
  47.                               type: 'category',
  48.                               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  49.                           },
  50.                           series: [
  51.                               {
  52.                                   name: 'Direct',
  53.                                   type: 'bar',
  54.                                   stack: 'total',
  55.                                   label: {
  56.                                       show: true
  57.                                   },
  58.                                   emphasis: {
  59.                                       focus: 'series'
  60.                                   },
  61.                                   data: [320, 302, 301, 334, 390, 330, 320]
  62.                               },
  63.                               {
  64.                                   name: 'Mail Ad',
  65.                                   type: 'bar',
  66.                                   stack: 'total',
  67.                                   label: {
  68.                                       show: true
  69.                                   },
  70.                                   emphasis: {
  71.                                       focus: 'series'
  72.                                   },
  73.                                   data: [120, 132, 101, 134, 90, 230, 210]
  74.                               },
  75.                               {
  76.                                   name: 'Affiliate Ad',
  77.                                   type: 'bar',
  78.                                   stack: 'total',
  79.                                   label: {
  80.                                       show: true
  81.                                   },
  82.                                   emphasis: {
  83.                                       focus: 'series'
  84.                                   },
  85.                                   data: [220, 182, 191, 234, 290, 330, 310]
  86.                               },
  87.                               {
  88.                                   name: 'Video Ad',
  89.                                   type: 'bar',
  90.                                   stack: 'total',
  91.                                   label: {
  92.                                       show: true
  93.                                   },
  94.                                   emphasis: {
  95.                                       focus: 'series'
  96.                                   },
  97.                                   data: [150, 212, 201, 154, 190, 330, 410]
  98.                               },
  99.                               {
  100.                                   name: 'Search Engine',
  101.                                   type: 'bar',
  102.                                   stack: 'total',
  103.                                   label: {
  104.                                       show: true
  105.                                   },
  106.                                   emphasis: {
  107.                                       focus: 'series'
  108.                                   },
  109.                                   data: [820, 832, 901, 934, 1290, 1330, 1320]
  110.                               }
  111.                           ]
  112.                       }
  113.                       //组件到此结束
  114.                     )
  115.                   }
  116.                 },
  117.                 mounted(){
  118.                     this.initData()
  119.                 }
  120.              }
  121. </script>
  122. <style>
  123. </style>
复制代码
表现结果:

到此这篇关于Vue利用echarts可视化组件的方法的文章就先容到这了,更多相干Vue echarts可视化组件内容请搜刮脚本之家从前的文章或继续欣赏下面的相干文章希望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作