效果如下：

1、导入echarts组件，建议使用4.9.0版本，5.0.1可能会报错

npm uninstall echarts //卸载npm install echarts@4.9.0//引入特定组件

2、引入echarts组件，可以在main.js中引入

//报表
import echarts from 'echarts'
//Vue.use(echarts)
Vue.prototype.$echarts = echarts

3、单独把echarts的图表写出来

4、写echarts组件

柱状分析图

<template><div ref="chart" class="container"></div>
</template><script>export default {data: function() {return {};},methods: {initChart() {let myChart = this.$echarts.init(this.$refs.chart);myChart.setOption({title: {text: '柱状分析图'},tooltip: {},xAxis: {type: 'category',data: this.keyData,},yAxis: {type: 'value',},series: [{data: this.valueData,type: 'bar'}]})}},computed: {keyData: function() {return this.$store.getters.getKeyData;},valueData: function() {return this.$store.getters.getValueData;}},mounted() {this.initChart();},}
</script><style>.container {width: 500px;height: 300px;}
</style>

饼状图

<template><div ref="chart" class="container"></div>
</template><script>export default {data: function() {return {};},methods: {initChart() {let myChart = this.$echarts.init(this.$refs.chart);myChart.setOption({title: {text: '圆形分析图',subtext: '',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',},series: [{name: '访问来源',type: 'pie',radius: '50%',data: this.pieData,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})}},computed:{pieData:function(){return this.$store.getters.getPieData;}},mounted() {this.initChart();}}
</script><style>.container {width: 500px;height: 300px;}
</style>

5、在需要的地方引入图表组件

<template><!--客户流失--><div><!--面包屑--><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item><el-breadcrumb-item>销售统计</el-breadcrumb-item></el-breadcrumb><!--按钮--><div align="center" class="div-button"><el-button-group><el-button type="primary" icon="el-icon-s-data" @click="cutColumnar">柱形分析图</el-button><el-button type="success" @click="cutRound">圆形分析图 <i class="el-icon-pie-chart"></i></el-button></el-button-group></div><!--分析图--><div align="center" class="div-analysis"><Histogram v-show="columnar" v-if="isRouterAlive"></Histogram><PieChart v-show="round" v-if="isRouterAlive"></PieChart><div v-if="!isRouterAlive"><br><br><br><h1>暂无数据</h1><br><br><br></div></div><!--表单按钮组--><div align="center" class="div-button"><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="日期:"><el-date-picker v-model="formInline.ataDate" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit(1)">查询</el-button></el-form-item></el-form></div><!--表格--><div align="center"><template><el-table :data="tableData" height="250" border style="width: 96%"><el-table-column type="index" label="编号" width="250" :index="indexMethod"></el-table-column></el-table-column><el-table-column prop="tName" label="商品类型"></el-table-column><el-table-column prop="sumPrice" label="销售额"></el-table-column></el-table></template><!--分页组件--><div class="div-pagination"><el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page":page-sizes="[5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination></div></div><router-view></router-view></div>
</template><script>import Histogram from '@/views/statistic/graph/Histogram.vue'import PieChart from '@/views/statistic/graph/PieChart.vue'export default {data: function() {return {//控住图表组件切换columnar: true,round: false,//formInline: {ataDate: '',},//表格tableData: null,//控制表格显示，用于刷新组件isRouterAlive: true,//分页page: 1,rows: 5,total: 0,}},components: {Histogram,PieChart},methods: {//表格的编号（这个编号不是在数据库查到的，而是在前端自己定义的,这样更灵活）indexMethod: function(index) {return (this.page - 1) * this.rows + (index + 1);},//切换组件cutColumnar: function() {this.columnar = true;this.round = false;},cutRound: function() {this.round = true;this.columnar = false;},//分页handleSizeChange: function(rows) {this.page = 1;this.rows = rows;this.query();},handleCurrentChange: function(page) {this.page = page;this.query();},//表单提交onSubmit: function(page) {//页码跳转第一页this.page = page;//查询this.query();},//查询query: function() {//跳转路径let url = this.axios.urls.STATISTIC_QUERYSALES;//参数if(this.formInline.ataDate==null){//日期组件如果不加判断，在清空再查的时候会报错this.formInline.ataDate="";}let primarys = {startTime: this.formInline.ataDate[0],endTime: this.formInline.ataDate[1],page: this.page,rows: this.rows,}this.axios.post(url, primarys).then(resp => {//ajax返回的数据let json = resp.data;//判断是否请求成功 这个基于后台的响应封装类if (json.status == 200) {//后台返回的表格数据let arr = json.data;//把数据绑定在数据表格上this.tableData = arr;/*柱状图需要的数据格式是这样的：option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};饼状图是这样的： {value: 535,name: '荆州'}, {value: 510,name: '兖州'}, {value: 634,name: '益州'}, {value: 735,name: '西凉'}*///我们需要把数据格式转换成想要的效果（当然也可以查出来就是符合的格式）//柱状图需要的数据格式let keyData = [];let valueData = [];//饼图需要的数据格式let pieData = [];//数据转换for (let i = 0; i < arr.length; i++) {keyData.push(arr[i].tName);valueData.push(arr[i].sumPrice);pieData.push({value: arr[i].sumPrice,name: arr[i].tName});}//放入vuex中//柱状图所需要的数据this.$store.commit('setKeyData', {keyData: keyData,});this.$store.commit('setValueData', {valueData: valueData,});//饼状图所需要的数据this.$store.commit('setPieData', {pieData: pieData,});} else {this.tableData = null;}})}},watch: {//监听表格,当表格数据发生变化就要引起统计图的值改变tableData(searchWord, retWord) {//当表格没有值的时候显示"暂无数据"if (searchWord == null) {this.isRouterAlive = false} else {//当表格刷新且有值就刷新这图表this.isRouterAlive = false// //this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行this.$nextTick(() => (this.isRouterAlive = true))}}},created: function() {this.query();}}
</script>

以上给大家一个动态实现统计报表的思路，这样做的好处是一个图表可以用在多个页面中，只需要做参数上的处理就可以，其他的图表可以依照这个思路参考

Vue中基于Vuex使用echarts组件动态数据绑定的方法相关推荐

Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
前端学习（2487）：在VUE中使用element-ui的el-select组件时出现该报错
一. 报错场景在VUE中使用element-ui的el-select组件时出现该报错 [Vue warn]: Missing required prop: "value" 1 二 ...
vue中给v-for渲染的元素动态添加移除类名
vue中给v-for渲染的元素动态添加移除类名今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...
检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下：...
检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第一步:首先将msvcr71.dll, SQLD ...
检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败解决方法
最近在处理一个项目时使用到了在word中写入信息的功能,由于系统原来就支持在线打印功能,使用了PageOffice,于是就研究了一下PageOffice,发现Pageoffice不能满足自己的功能(或 ...
vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公 ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...

Vue中基于Vuex使用echarts组件动态数据绑定的方法

效果如下：

1、导入echarts组件，建议使用4.9.0版本，5.0.1可能会报错

2、引入echarts组件，可以在main.js中引入

3、单独把echarts的图表写出来

4、写echarts组件

柱状分析图

饼状图

5、在需要的地方引入图表组件

以上给大家一个动态实现统计报表的思路，这样做的好处是一个图表可以用在多个页面中，只需要做参数上的处理就可以，其他的图表可以依照这个思路参考

Vue中基于Vuex使用echarts组件动态数据绑定的方法相关推荐

最新文章

热门文章