vue中使用Echarts折线图和扇形图

最新推荐文章于 2024-05-07 15:35:18 发布

冬.

最新推荐文章于 2024-05-07 15:35:18 发布

阅读量5.1k

点赞数 14

本文链接：https://blog.csdn.net/qq_45174759/article/details/103126563

版权

前言：

在最近的一次项目中用到了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>

效果如图所示：
在这里插入图片描述
谢谢大家，多多指教！！！

冬.

关注

14
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
vue中使用Echarts折线图和扇形图

前言：在最近的一次项目中用到了Echarts折线图，并且是在vue里面使用，使用的时候遇到了一个很大的坑，并且网上都是一些官方案例，都没有用到具体的实际项目中。现在就来让我给你们详细介绍一下在具体项目中如何使用。使用方法1. 安装：npm install echarts --save安装的具体方法在以前所讲的使用vue-cli搭建SPA项目里面2 引入： import echarts f...
复制链接

扫一扫