123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <template>
- <div ref="dom" class="charts chart-line"></div>
- </template>
- <script>
- import echarts from 'echarts'
- import tdTheme from './theme.json'
- import {
- on,
- off
- } from '@/libs/tools'
- echarts.registerTheme('tdTheme', tdTheme)
- export default {
- name: 'ChartLine',
- props: {
- value: Object, // 单列折线图,key为x轴,value为y轴
- text: String,
- subtext: String,
- color: {
- type: Array,
- default: function () {
- return []
- }
- },
- // 当有多列折线图展示时的X轴坐标数据
- xAxisData: {
- type: Array,
- default: function () {
- return []
- }
- },
- // 当有多列折线图展示时的y轴坐标数据
- seriesData: {
- type: Array,
- default: function () {
- return []
- }
- },
- // y轴坐标单位
- yUnit: {
- type: String,
- default: ''
- },
- // x轴标签旋转角度
- xAxisRotate: {
- type: Number,
- default: 0
- }
- },
- watch: {
- xAxisData: {
- handler (nVal, oVal) {
- if (nVal) {
- // 根据x轴时间长度控制滚动条位置及显示状态 x轴长度大于25时,显示滚动条并且滚动条结束位置在80%
- if (nVal.length > 25) {
- this.isShowZoom = true
- this.xZoomEnd = 80
- } else {
- this.isShowZoom = false
- this.xZoomEnd = 100
- }
- if (nVal.length > 30) {
- this.xZoomEnd = 70
- }
- if (nVal.length > 35) {
- this.xZoomEnd = 60
- }
- if (nVal.length > 40) {
- this.xZoomEnd = 50
- }
- if (nVal.length > 45) {
- this.xZoomEnd = 40
- }
- if (nVal.length > 50) {
- this.xZoomEnd = 30
- }
- this.pageInit()
- }
- },
- deep: true,
- immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
- },
- xAxisRotate: {
- handler (nVal, oVal) {
- if (nVal !== '') {
- this.pageInit()
- }
- },
- deep: true,
- immediate: true
- }
- },
- data () {
- return {
- dom: null, // echarts实例对象
- isShowZoom: false, // 是否展示滚动条
- xZoomEnd: 100, // x轴滚动条结束位置
- yMax: 1000 // y轴最大值
- }
- },
- methods: {
- resize () {
- this.dom.resize()
- },
- pageInit () {
- const that = this
- const legend = this.seriesData.map(_ => _.name)
- this.$nextTick(() => {
- const xAxisData = this.value ? Object.keys(this.value) : this.xAxisData
- const seriesData = this.value ? Object.values(this.value) : this.seriesData
- const yMax = this.getYMax(this.seriesData) // 计算最大值
- const option = {
- color: this.color,
- title: {
- text: this.text,
- subtext: this.subtext,
- x: 'left'
- },
- legend: {
- data: legend
- },
- // 鼠标放上去遮罩层提示信息
- tooltip: {
- trigger: 'axis'
- },
- dataZoom: [{ // Y轴固定,让内容滚动
- type: 'slider',
- show: this.isShowZoom, // flase直接隐藏图形
- xAxisIndex: [0],
- left: '9%', // 滚动条靠左侧的百分比
- bottom: -5,
- start: 0, // 滚动条的起始位置
- end: this.xZoomEnd, // 滚动条的截止位置(按比例分割你的柱状图x轴长度)
- zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
- }],
- xAxis: {
- type: 'category',
- boundaryGap: false, // 两边是否留白
- data: xAxisData,
- axisLabel: {
- interval: 0,
- rotate: this.xAxisRotate
- },
- axisTick: {
- inside: true,
- lignWithLabel: true // 这两行代码可以让刻度正对刻度名
- }
- },
- yAxis: {
- type: 'value',
- min: 0,
- max: yMax,
- axisLabel: {
- formatter: `{value} ${this.yUnit}`
- },
- // interval: 2,
- position: 'left'
- }
- }
- if (this.value) {
- option.series = [{
- data: seriesData,
- type: 'line',
- barWidth: 35,
- label: {
- normal: {
- show: true,
- position: 'top'
- }
- }
- }]
- } else {
- option.series = this.seriesData
- }
- // 已创建的先销毁
- if (this.dom) {
- this.dom.dispose()
- }
- this.dom = echarts.init(this.$refs.dom, 'tdTheme')
- this.dom.setOption(option)
- // 更新y轴最大值
- this.dom.on('legendselectchanged', function (params) {
- // console.log(params, that.seriesData, 'legendselectchanged')
- const data = that.seriesData.filter(item => params.selected[item.name])
- option.yAxis.max = that.getYMax(data)
- that.dom.setOption(option)
- })
- // 重置图标大小
- this.dom.resize()
- on(window, 'resize', this.resize)
- })
- },
- // 计算y轴最大值
- getYMax (data) {
- let max = []
- data.map(item => {
- max = max.concat(item.data)
- })
- return Math.max.apply(null, max)
- }
- },
- mounted () {
- this.pageInit()
- },
- beforeDestroy () {
- off(window, 'resize', this.resize)
- }
- }
- </script>
|