前端笔记-vue cli使用echarts
目录过程代码与实例过程首先下载echartscnpm install echarts -S//或者是cnpm install echarts --save下载好后:在main.js中导入:import echarts from 'echarts'Vue.prototype.$axios=Axios在vue中实例下:<te...
·
目录
过程
首先下载echarts
cnpm install echarts -S
//或者是
cnpm install echarts --save
下载好后:
在main.js中导入:
import echarts from 'echarts'
Vue.prototype.$axios=Axios
在vue中实例下:
<template>
<div>
<div>
<div id="main" style="width: 500px; height:500px"></div>
</div>
</div>
</template>
script如下:
<script>
export default {
mounted(){
this.drawLine();
},
methods: {
handleSubmit(){
...
...
...
},
//开始画图了
drawLine(){
// 基于准备好的dom,初始化echarts实例
//var myChart = this.$echarts.init(document.getElementById('main'));
let myChart = this.$echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
</script>
程序运行截图如下:
代码与实例
结构如下:
源码如下:
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'
import echarts from 'echarts'
import TestEChart from './TestEChart'
Vue.config.productionTip = false
Vue.prototype.$axios=Axios
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { TestEChart },
template: '<TestEChart/>',
})
TestEChart.vue
<template>
<div>
<div>
<div id="main" style="width: 500px; height:500px"></div>
</div>
<div>
<button @click="handleSubmit">获取</button>
</div>
</div>
</template>
<script>
export default {
mounted(){
this.drawLine();
},
methods: {
handleSubmit(){
this.$axios({
type: 'get',
url: '/gra/list'
}).then(res => {
console.log(res)
}).catch(err=>{
alert(err)
})
},
//开始画图了
drawLine(){
// 基于准备好的dom,初始化echarts实例
//var myChart = this.$echarts.init(document.getElementById('main'));
let myChart = this.$echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
</script>
<style>
</style>
已为社区贡献33条内容
所有评论(0)