|
@@ -1,12 +1,12 @@
|
|
|
-<template>
|
|
|
- <div class="Echarts">
|
|
|
- <div id="main" style="width:100%; height:600px;"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
+<template>
|
|
|
+ <div class="Echarts">
|
|
|
+ <div id="main" style="width:100%; height:600px;"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
<script>
|
|
|
- require('echarts/lib/component/legend')
|
|
|
- export default {
|
|
|
+ require('echarts/lib/component/legend')
|
|
|
+ export default {
|
|
|
name: 'Echarts',
|
|
|
props:{
|
|
|
echartData: {
|
|
@@ -31,83 +31,88 @@
|
|
|
ehaersLists() {
|
|
|
return this.ehaersList
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- myEcharts(datas={x:'',y:''}) {
|
|
|
- // 基于准备好的dom,初始化echarts实例
|
|
|
- var myChart = this.$echarts.init(document.getElementById('main'));
|
|
|
-
|
|
|
- // 指定图表的配置项和数据
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: this.echartData.name,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ myEcharts(datas={x:'',y:''}) {
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('main'));
|
|
|
+
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: this.echartData.name,
|
|
|
top: 0,
|
|
|
- left: 'center',
|
|
|
- subtextStyle: {
|
|
|
- fontFamily: "微软雅黑",
|
|
|
- fontSize: 14,
|
|
|
- color: '#6c7a89',
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {},
|
|
|
- legend: {
|
|
|
+ left: 'center',
|
|
|
+ subtextStyle: {
|
|
|
+ fontFamily: "微软雅黑",
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#6c7a89',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
data: this.echartData.numNameArr,
|
|
|
- top: 25,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: this.ehaersLists.x,
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- series: [{
|
|
|
- name: this.echartData.numName[0],
|
|
|
- type: 'bar',
|
|
|
- data: this.ehaersLists.y1,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#1C84C6', //设置柱子颜色
|
|
|
- label: {
|
|
|
- show: true, //柱子上显示值
|
|
|
- position: 'top', //值在柱子上方显示
|
|
|
- textStyle: {
|
|
|
- color: '#333' //值得颜色
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },{
|
|
|
- name: this.echartData.numName[1],
|
|
|
- type: 'bar',
|
|
|
- data: this.ehaersLists.y2,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#FEA908', //设置柱子颜色
|
|
|
- label: {
|
|
|
- show: true, //柱子上显示值
|
|
|
- position: 'top', //值在柱子上方显示
|
|
|
- textStyle: {
|
|
|
- color: '#333' //值得颜色
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- }]
|
|
|
- };
|
|
|
-
|
|
|
- // 使用刚指定的配置项和数据显示图表。
|
|
|
+ top: 25,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: this.ehaersLists.x,
|
|
|
+ axisLabel : {
|
|
|
+ formatter: function(){
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: this.echartData.numName[0],
|
|
|
+ type: 'bar',
|
|
|
+ data: this.ehaersLists.y1,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#1C84C6', //设置柱子颜色
|
|
|
+ label: {
|
|
|
+ show: true, //柱子上显示值
|
|
|
+ position: 'top', //值在柱子上方显示
|
|
|
+ textStyle: {
|
|
|
+ color: '#333' //值得颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },{
|
|
|
+ name: this.echartData.numName[1],
|
|
|
+ type: 'bar',
|
|
|
+ data: this.ehaersLists.y2,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FEA908', //设置柱子颜色
|
|
|
+ label: {
|
|
|
+ show: true, //柱子上显示值
|
|
|
+ position: 'top', //值在柱子上方显示
|
|
|
+ textStyle: {
|
|
|
+ color: '#333' //值得颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
setTimeout(function (){
|
|
|
window.onresize = function () {
|
|
|
myChart.resize();
|
|
|
}
|
|
|
- },200)
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.myEcharts();
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style>
|
|
|
-
|
|
|
+ },200)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.myEcharts();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
</style>
|