VUE使用echarts不显示问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
首先 下载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>
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 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)