0
点赞
收藏
分享

微信扫一扫

vue使用echarts可视化图形插件

1.安装echarts:  cnpm/npm i echarts -S

2.main.js中   import echarts from 'echarts'    Vue.prototype.$echarts = echarts;

3.组件中使用:

 

<template>
<div class="echart_box">
<div id="myChart" :style="{width: '600px', height: '400px',margin:'0 auto'}"></div>
</div>
</template>
<script>
export default {
data() {
return {

}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: 'Vue中使用echarts的demo' },
tooltip: {},
xAxis: {
data: ["橙子", "橘子", "柚子", "榴莲", "水蜜桃", "栗子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [15, 20, 37, 15, 8, 23]
}]
});
}
}
}

</script>

 

4.具体参数配置 方法见:​​http://echarts.baidu.com/​​

 



举报

相关推荐

0 条评论