博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+element+echarts柱状图+列表
阅读量:5068 次
发布时间:2019-06-12

本文共 2373 字,大约阅读时间需要 7 分钟。

前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面;

 页面和js可以echarts官网实例看下都是有的,主要看下如何动态赋值:

柱状图和列表:

 

js:

var vue = new Vue({    el: '#app',    data: {        tableData:[],    },    created: function () {        this.initTable();    },getChartOption(data){            var option = {                title: {                    text: '按办理单位任务统计',                    x:'center',                    textAlign:'left',                    top:'3%'                },                tooltip: {                    trigger: 'axis',                    axisPointer: {                        type: 'shadow'                    }                },                grid: {                    left: '1%',                    right: '1%',                    top: '15%',                    bottom:'10%',                    containLabel: true                },                backgroundColor:'#fff',                xAxis: {                    type: 'category',                    data: data.nameList,                    axisLine:{                        lineStyle:{                            color:'#9a9a9a'                        }                    }                },                yAxis: {                    type: 'value',                    axisLine:{                        lineStyle:{                            color:'#9a9a9a'                        }                    }                },                series: [{                    data: data.valueList,                    type: 'bar',                    itemStyle:{                        normal:{                            color:'#427aff'                        }                    }                }]            };            return option;        },
var ele=document.getElementById('echart');                            var myChart = echarts.init(ele);                            var option=self.getChartOption({                                nameList:nameList,                                valueList:valueList                            });                            myChart.setOption(option);                            window.onresize = myChart.resize;

 效果:

 

转载于:https://www.cnblogs.com/wmqiang/p/11008769.html

你可能感兴趣的文章
FZU 1914 Funny Positive Sequence(线性算法)
查看>>
oracle 报错ORA-12514: TNS:listener does not currently know of service requested in connec
查看>>
基于grunt构建的前端集成开发环境
查看>>
MySQL服务读取参数文件my.cnf的规律研究探索
查看>>
java string(转)
查看>>
__all__有趣的属性
查看>>
利用循环播放dataurl的视频来防止锁屏:NoSleep.js
查看>>
python3 生成器与迭代器
查看>>
java编写提升性能的代码
查看>>
ios封装静态库技巧两则
查看>>
Abstract Factory Pattern
查看>>
C# 实现Bresenham算法(vs2010)
查看>>
list 容器 排序函数.xml
查看>>
Activity启动过程中获取组件宽高的五种方式
查看>>
SQLite数据库简介
查看>>
利用堆实现堆排序&优先队列
查看>>
Mono源码学习笔记:Console类(四)
查看>>
《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03:暂停游戏》
查看>>
CPU,寄存器,一缓二缓.... RAM ROM 外部存储器等简介
查看>>
windows下编译FreeSwitch
查看>>