赞
踩
npm install echarts -S
// 引入 echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
<template> <div class="column-container"> <div ref="monthWorkOrder" class="echarts-box" style="width: 600px; height: 300px; border: 1px solid red"></div> </div> </template> <script> export default { name: 'Column', data() { return {} }, mounted() { this.initMonthWorkOrder() }, methods: { // 月工单处理数 initMonthWorkOrder() { let myChart = this.$echarts.init(this.$refs.monthWorkOrder) let options = { tooltip: { backgroundColor: 'rgba(204, 221, 255, 0.6)', trigger: 'axis', borderColor: '#CCDDFF', textStyle: { color: '#2562DC' } }, color: ['#635df7', '#f15d5d'], grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value', splitLine: { show: true, lineStyle: { type: 'dashed', color: '#D3D8DD' } } } ], series: [ { name: '维修', type: 'bar', barWidth: 10, data: [141, 39, 10, 16, 79, 116, 67, 104, 12, 36, 20, 128] }, { name: '保养', type: 'bar', barWidth: 10, data: [36, 124, 112, 87, 16, 28, 80, 24, 112, 146, 127, 105] } ] } myChart.setOption(options) } } } </script> <style lang="scss" scoped> .column-container { height: 100%; } </style>
效果图如下:
注意:echarts盒子一定要给宽高
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。