VUE使用echarts不显示问题

首先 下载echarts,v-charts,和vue-charts(虽然不知道有没有用,但是我都下了)

下载指定版本 npm install echarts@xxx--save

或是最新版本 npm install echarts --save

 接下来很熟练的在main.js中添加,不用管resource哈,没截掉而已

 最后直接在vue文件里添加代码即可,Option中内容直接来自官网(百度直接搜echarts即可,查看全部示例,可以自己选)

<template>
    <div>
        <div id="myChart" :style="{width: '380px', height: '230px', padding: '0px'}"></div>
    </div>
  </template>
  <script>
  export default {
    name: 'EchartsPart',
    mounted(){
      // 基于准备好的dom,初始化echarts实例
      let echarts = require('echarts')
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
            title: {
            text: '管理员与超级管理员人数',
            top: 0,
            textStyle: {
            color: '#666666',
            fontSize:'14px',
          }
  },
        legend: {top: '10%',
        left: 'center'},
  tooltip: {},
  dataset: {
    source: [
      ['product', '管理员', '超级管理员'],
      ['黄', 42, 8],
      ['三', 23, 3],
      ['谷', 46, 6,],
      ['下', 27, 9],
      ['北', 17, 5]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }]
      });
    }
  }
  </script>
  <style scoped>
</style>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用echarts有两种方法。 第一种方法是通过安装并全局引入echarts。首先,你需要在main.js文件添加以下两行代码: ``` import * as echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 这样就将echarts挂载到Vue实例上了。接下来,你可以在任何Vue组件使用echarts来绘制图表了。绘制图表的思路是: 1. 获取一个有宽高的DOM元素; 2. 初始化echarts实例(echarts.init); 3. 指定图表的配置项和数据(option); 4. 使用刚指定的配置项和数据显示图表(setOption(option))。 另一种方法是通过在单个组件引入echarts。首先,你需要安装echarts: ``` npm install echarts --save ``` 然后,在需要使用echarts的组件导入echarts: ``` import echarts from 'echarts' ``` 这样就可以在该组件使用echarts来绘制图表了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue 使用Echarts](https://blog.csdn.net/chenfairy/article/details/123059785)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [在 vue 使用 echarts 的详细步骤](https://blog.csdn.net/sinat_33255495/article/details/109217408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值