123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <template>
- <div class="echarts-div" id='bar-chart' ref="bar-chart"></div>
- </template>
- <script>
- module.exports = {
- data() {
- return {
-
- }
- },
- methods: {
-
- f5BarChart: function() {
-
- var x_name = '';
- var y_name = "注册数量";
- var dataArray = [];
- var valueArray = [];
-
- var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
- for (var i in arr) {
- i = parseInt(i) + 1;
- dataArray.push(i + '月');
- if (i < 10) {
- i = "0" + i;
- }
- i = i + "";
- valueArray.push(sa.randomNum(100, 1000) || 0);
- }
-
-
-
- var ele = this.$refs['bar-chart'];
- var myChart = echarts.init(ele);
- var option = {
- tooltip: {
- trigger: 'axis',
- formatter: '{b}<br/> ' + y_name + ':{c}',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid:{x: 50, y: 30, x2: 25, y2: 25},
- toolbox: {
- show: true,
- top: 0,
- feature: {
- saveAsImage: {
- show: true
- }
- }
- },
- xAxis: {
- name: x_name,
- type: 'category',
-
-
-
- data: dataArray
- },
- yAxis: {
- name: y_name,
- type: 'value'
- },
- series: [{
- name: y_name,
- data: valueArray,
- type: 'bar',
- label: {
- normal: {
- show: true,
- position: 'top',
- formatter: '{c}'
- }
- },
- itemStyle: {
- normal: {
- color: '#5DB1FF',
- label: {
- show: true,
- textStyle: {
- color: 'black'
- }
- }
- }
- }
- }]
- };
- myChart.setOption(option);
- window.myChartList.push(myChart);
-
-
- },
- },
- created() {
-
- this.$nextTick(function() {
- this.f5BarChart();
- });
- }
- }
- </script>
- <style scoped>
-
- </style>
|