vue中使用Echarts折线图和扇形图
前言：在最近的一次项目中用到了Echarts折线图，并且是在vue里面使用，使用的时候遇到了一个很大的坑，并且网上都是一些官方案例，都没有用到具体的实际项目中。现在就来让我给你们详细介绍一下在具体项目中如何使用。使用方法1. 安装：npm install echarts --save安装的具体方法在以前所讲的使用vue-cli搭建SPA项目里面2 引入： import echarts f...
·
前言：
在最近的一次项目中用到了Echarts折线图，并且是在vue里面使用，使用的时候遇到了一个很大的坑，并且网上都是一些官方案例，都没有用到具体的实际项目中。现在就来让我给你们详细介绍一下在具体项目中如何使用。
Echarts折线图
使用方法
1. 安装：npm install echarts --save
安装的具体方法在以前所讲的使用vue-cli搭建SPA项目里面
2 引入： import echarts from 'echarts'
3.定义具备高宽的 DOM 容器。
<div id="chartLineBox" style="width: 90%;height: 70vh;"> </div>
- echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图
代码如下：
<template>
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 1200px;height: 600px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'zhexiantu',
data() {
return {
charts: '',
/* opinion: ["1", "3", "3", "4", "5"],*/
opinionDataone: [],
opinionData1: ["20000", "12000", "10000", "40213", "87654", "90000", "80000", "20000", "12000", "10000", "40213",
"87654", "10000", "10000", "50000"
]
}
},
created() {
var a;
let url = this.axios.urls.SYSTEM_tongjibaobiao_list;
this.axios.post(url, {}).then((response) => {
console.log(response);
console.log(response.data.data[0].money);
a = response.data.data[0].money
this.opinionDataone = a;
}).catch(function(error) {
console.log(error);
});
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title: {
text: '公司近七天的收支情况图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['借款', '还款']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
name: '(天数)',
type: 'category',
boundaryGap: false,
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
},
yAxis: {
name: '单位(m^￥/元)',
type: 'value',
},
series: [{
name: '借款',
type: 'line',
stack: '总借款',
data: this.opinionDataone
},
{
name: '还款',
type: 'line',
stack: '总还款',
data: this.opinionData1
}
]
})
}
},
//调用
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
在看一下我们的后台方法，我们需要在后台把它把我们的数据转换成它需要的格式
如图所示：
这里就遇到了我所遇到的坑，这样去运行是不会出来结果的
解决方法：
绘图方法必须放到axios回调函数里面
解决代码：
<template>
<!--为echarts准备一个具备大小的容器dom-->
<div id="main" style="width: 1200px;height: 600px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'zhexiantu',
data() {
return {
charts: '',
/* opinion: ["1", "3", "3", "4", "5"],*/
opinionDataone: [],
opinionData1: ["20000", "12000", "10000", "40213", "87654", "90000", "80000", "20000", "12000", "10000", "40213",
"87654", "10000", "10000", "50000"
]
}
},
created() {
var a;
let url = this.axios.urls.SYSTEM_tongjibaobiao_list;
this.axios.post(url, {}).then((response) => {
console.log(response);
console.log(response.data.data[0].money);
this.$nextTick(function() {
this.drawLine('main')
})
a = response.data.data[0].money
this.opinionDataone = a;
}).catch(function(error) {
console.log(error);
});
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
title: {
text: '公司近七天的收支情况图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['借款', '还款']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
name: '(天数)',
type: 'category',
boundaryGap: false,
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
},
yAxis: {
name: '单位(m^￥/元)',
type: 'value',
},
series: [{
name: '借款',
type: 'line',
stack: '总借款',
data: this.opinionDataone
},
{
name: '还款',
type: 'line',
stack: '总还款',
data: this.opinionData1
}
]
})
}
},
//调用
/* mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
} */
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
效果如图所示：
Echarts扇形图
这个就不多说了，跟Echarts折线图其实都差不多的，只是有一点要注意，它的绘图方法必须在axios回调函数里面赋完值之后，在进行绘图方法，如图所示：
代码如下：
<template>
<div>
<div class="pie">
<div id="pie1">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="float:left;width:100%;height: 500px"></div>
</div>
<div id="pie2">
<div id="main2" style="float:left;width:100%;height: 120px"></div>
</div>
</div>
</div>
</template>
<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
data() {
return {
opinionData1:[]
/* opinionData1:[{name:"邮件营销", value:"335"},
{name:"邮件营销", value:"335"},
{name:"邮件营销", value:"335"},
{name:"邮件营销", value:"335"},
{name:"邮件营销", value:"335"}] */
}
},
created(){
var a;
let url = this.axios.urls.SYSTEM_tongjibaobiao_list2;
this.axios.post(url, {}).then((response) => {
console.log(response);
console.log(response.data.data);
a=response.data.data;
this.opinionData1 =a;
this.initData();
}).catch(function(error) {
console.log(error);
});
},
/* mounted(){
this.initData();
}, */
methods:{
//初始化数据
initData() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption({
title : {
text: '公司经济组成形式',//主标题
subtext: '科比金融贷款公司',//副标题
x:'center',//x轴方向对齐方式
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
bottom: 'bottom',
data: ['用户总资金','公司总资金','公司总借款','用户总还款','用户总投资']
},
series : [
{
name: '数据来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:this.opinionData1,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
}
}
</script>
效果如图所示：
谢谢大家，多多指教！！！
前往低代码交流专区
更多推荐
16
0- 0
已为社区贡献2条内容
所有评论(0)