Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div
- :class="className"
- :style="{height:height,width:width}"/>
- </template>
- <script>
- import echarts from 'echarts'
- require('echarts/theme/macarons') // echarts theme
- import { debounce } from '@/utils'
- export default {
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '100%'
- },
- height: {
- type: String,
- default: '400px'
- },
- autoResize: {
- type: Boolean,
- default: true
- },
- chartData: {
- type: Object,
- required: true
- }
- },
- data() {
- return {
- chart: null,
- sidebarElm: null
- }
- },
- watch: {
- chartData: {
- deep: true,
- handler(val) {
- this.setOptions(val.quantities, val.dates)
- }
- }
- },
- mounted() {
- this.initChart()
- if (this.autoResize) {
- this.__resizeHandler = debounce(() => {
- if (this.chart) {
- this.chart.resize()
- }
- }, 100)
- window.addEventListener('resize', this.__resizeHandler)
- }
- // 监听侧边栏的变化
- this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
- this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- if (this.autoResize) {
- window.removeEventListener('resize', this.__resizeHandler)
- }
- this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- sidebarResizeHandler(e) {
- if (e.propertyName === 'width') {
- this.__resizeHandler()
- }
- },
- setOptions({ company, point } = {}, dates) {
- if (!company || !point) {
- return false
- }
- this.chart.setOption({
- xAxis: {
- data: dates,
- boundaryGap: false,
- axisTick: {
- show: false
- }
- },
- grid: {
- left: 10,
- right: 10,
- bottom: 20,
- top: 30,
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- padding: [5, 10]
- },
- yAxis: {
- axisTick: {
- show: false
- }
- },
- legend: {
- data: [company.name, point.name]
- },
- series: [{
- name: company.name,
- itemStyle: {
- normal: {
- color: '#FF005A',
- lineStyle: {
- color: '#FF005A',
- width: 2
- }
- }
- },
- smooth: true,
- type: 'line',
- data: company.data,
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: point.name,
- smooth: true,
- type: 'line',
- itemStyle: {
- normal: {
- color: '#3888fa',
- lineStyle: {
- color: '#3888fa',
- width: 2
- },
- areaStyle: {
- color: '#f3f8ff'
- }
- }
- },
- data: point.data,
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }]
- })
- },
- initChart() {
- this.chart = echarts.init(this.$el, 'macarons')
- this.setOptions(this.chartData.quantities, this.chartData.dates)
- }
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement