123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <template>
- <div class="echarts-div" id='line-chart' ref='line-chart'></div>
- </template>
- <script>
- module.exports = {
- data() {
- return {
-
- }
- },
- methods: {
-
- f5LineChart: function() {
-
- var x_name = '';
- var y_name = "活跃数据";
- var typeArray = ['总计登录', '新增注册'];
- var dataArray = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
- var valueArray0 = [84, 126, 262, 201, 148, 133, 86, 186, 232, 215, 326, 412];
- var valueArray1 = [284, 296, 382, 501, 348, 273, 266, 327, 412, 515, 526, 712];
-
-
-
- var myChart = echarts.init(this.$refs['line-chart']);
- var option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- toolbox: {
- show: true,
- top: 0,
- feature: {
- saveAsImage: {
- show: true
- }
- }
- },
- grid:{x: 50, y: 30, x2: 25, y2: 25},
- legend: {
- data: typeArray
- },
- xAxis: {
- name: x_name,
- type: 'category',
- boundaryGap : false,
-
-
-
- data: dataArray
- },
- yAxis: {
- name: y_name,
- type: 'value'
- },
- series: [
- {
- name: '总计登录',
- type:'line',
- data: valueArray1,
- smooth: true,
- areaStyle: {
- normal: {
- color: 'rgba(0, 128, 0, 0.3)'
- }
- },
- itemStyle: {
- normal: {
- color: 'rgba(0, 128, 0, 0.8)',
- }
- },
- },
- {
- name: '新增注册',
- type:'line',
- data: valueArray0,
- smooth: true,
- areaStyle: {
- normal: {
- color: 'rgba(70, 128, 255, 0.3)'
- }
- },
- itemStyle: {
- normal: {
- color: 'rgba(70, 128, 255, 0.8)',
- }
- },
- },
- ]
- };
- myChart.setOption(option);
- window.myChartList.push(myChart);
- },
- },
- created() {
-
- this.$nextTick(function() {
- this.f5LineChart();
- });
- }
- }
- </script>
- <style scoped>
-
- </style>
|