Echarts——vue+echarts 简单使用折线图

折线图

<div class="power-echart">
          <div id="stationEchart">
            <qz-charts style="width: 100%; height: 100%" :options="lineAll"></qz-charts>
          </div>
        </div>
1
2
3
4
5

import { lineAll} from './config.js';
data里面定义
  data() {
    return {	
      lineAll: lineAll(),
     		}
     },
mounted(){
  this.lineCharts()
},
methods:{
  lineCharts() {
    //静态数据
      let energyConsumption = [190, 70, 30, 70, 60, 50];
      let energyIntensity = [90, 70, 30, 70, 60, 50];
      let year = [90, 70, 30, 70, 60, 50];
      //掉接口获取数据.....
      this.lineAll = lineAll(energyConsumption, energyIntensity, year);
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//config.js文件

import * as echarts from 'echarts';
let $black = `rgba(0,0,0,.8)`;

export const lineAll = (energyConsumption = [], energyIntensity = [], year = []) => {
    return {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: 10,
            top: 30,
            right: 15,
            bottom: 40,
            containLabel: true,
        },
        legend: {
            icon: 'circle',
            top: 0,
            data: ['功率', '辐照'],
        },
        color: ['#62D196', '#3B68F6'],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: false,
                textStyle: {
                    color: '#666666', //处理x轴的文字颜色
                },

            },
            data: year,
            splitLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: '#E6E6E8',
                },
            },
            axisTick: { //取消坐标轴刻度线
                show: false,
            },
            axisLabel: {
                textStyle: {
                    fontSize: 8,
                },
            },
        },
        yAxis: [{
                type: 'value',
                name: '功率kW',
                nameTextStyle: {
                    fontSize: 8,
                    padding: [0, 0, 0, 0],
                    color: '#666666',
                },

                axisLabel: {
                    textStyle: {
                        color: '#666666',
                        fontSize: 8,
                    },
                },
                axisTick: {
                    //取消y轴 -
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        opacity: 0, //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
                    },
                },
                show: true,
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                    },
                    show: true,
                },
            },
            {
                type: 'value',
                name: '辐照W/㎡',
                nameTextStyle: {
                    fontSize: 8,
                    padding: [0, 0, 0, 0],
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 8,
                    },
                },
                axisLine: {
                    show: false,
                },
                show: true,
                splitLine: {
                    show: false,
                },
                axisTick: {
                    //取消 -
                    show: false,
                },

            },
        ],
        series: [{
                name: '功率',
                data: energyConsumption,
                type: 'line',
                barWidth: 10,
                showSymbol: false,
                smooth: true,

            },
            {
                name: '辐照',
                data: energyIntensity,
                type: 'line',
                yAxisIndex: 1,
                barWidth: 10,
                lineStyle: {
                    width: 2,
                },
                showSymbol: false,
                smooth: true,
            },
        ],
    };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133