代码:
- class="leftCard" id="hiddenDanger" ref="hiddenDangerRef">
-
- <script>
- mounted(){
- this.getCharts()
- },
- methods:{
- getCharts() {
- let chartDom = document.getElementById('hiddenDanger');
- let myChart = this.$echarts.init(chartDom);
- this.option = {
- tooltip: {
- trigger: 'axis',
- },
- xAxis: {
- type: 'category',
- data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- triggerEvent: true,
- axisTick: {
- alignWithLabel: true,
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: '#D3EBFF',
- type: 'solid'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#D3EBFF',
- fontSize: '18'
- }
- }
- },
- yAxis: {
- type: 'value',
- name: '单位:条',
- min: 0,
- interval: 100,
- nameTextStyle: {
- color: '#D3EBFF',
- fontSize: 18,
- nameLocation: 'start',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#35618B'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#D3EBFF',
- fontSize: '18'
- }
- }
- },
- series: [
- {
- emphasis: {
- itemStyle: {
- opacity: 1
- }
- },
- data: [136, 260, 280, 165, 220, 260, 158, 165, 40, 130, 290, 210],
- type: 'pictorialBar',
- barCategoryGap: '-80%',/*多个并排柱子设置柱子之间的间距*/
- symbol:
- 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
- itemStyle: {
- normal: {
- color: 'rgba(9, 136, 204, 0.3500)'
- }
- },
- z: 10,
-
- }
- ]
- };
- myChart.setOption(this.option);
- },
- }
-
-
-
- script>