首先 下载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>

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐