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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
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> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)