公司框架集成vue + echarts

ssm集成vue和echarts

需求：最近在做统计报表，公司框架报表需要flash支持，现在大部分浏览器不支持flash了，只能想别的办法。

vue文档比较好找开发上手比较快，echarts图形化界面功能强大，使用比较简单。

废话不多说，直接开干

1、下载vue.js和echarts.js

官网下载
vue:https://cn.vuejs.org
echarts:https://echarts.apache.org/zh/index.html

2、集成vue和echarts

新建html文件，并引入

3、初始化vue

3、初始化echarts

script部分代码

<script>
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option = {
               		title: {
                           text: '各地区数量分布',
                           left: 'left'
                    },
               		legend: {},
                    tooltip: {},
                    color: ['#009ad6','#840228'],
                    dataset: {
                        source: window.parent.getData()
                    },
                    xAxis: {
                    	type: 'category',
                    	axisLabel: {
    						interval: 0,    //强制文字产生间隔
    					    rotate: 45,     //文字逆时针旋转45°
    						textStyle: {    //文字样式
					            fontSize: 16,
					            fontFamily: 'Microsoft YaHei'
					            }
    					   }
                    },
                    yAxis: {},
                    splitArea:{
                        areaStyle:['#009ad6','#840228']
                    },
                    series: [
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };
                myChart.setOption(option);
                window.addEventListener("resize",function(){
                    myChart.resize();
                });
            </script>

4、最终效果，由于使用的公司框架，发送请求比较方便，所以使用iframe嵌套的方式。

$("#iframe").attr('src',url);

最终效果

5、发现的问题

多个echarts实例在同一个页面初始化时，放到一个js中不能进行渲染，具体还原未找到，有解决方案的欢迎留言。