趋势图自适应 自定义指令

于 2023-05-23 16:27:02 发布
阅读量59 收藏
点赞数
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37187520/article/details/130829954
版权 
<template>
  <div v-resize="resize" id="generaltrend" :style="{height:height,width:width}"/>
</template>

<script>
  import {formatNumToTen, getChartHead} from '../../../../utils/methods'
// 引入 ECharts 主模块
// var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入折线图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title');
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
export default {
  name: 'HomeGrandSalesChart',
  // 自定义指令
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''
        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            // binding.value 代表调用 自定义属性绑定的方法
            // console.log(binding.value);
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  props: {
    dataList: {},
    storeNo: {
      type: String,
      default: ''
    },
    // yearStart: '',
    // yearEnd: '',
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    monthDayList: {
      type: Array,
      default: () => []
    },
    lunarMonthDate: {
      type: Array,
      default: () => []
    },
    lunarList: {
      type: Array,
      default: () => []
    },
  },
  data: function() {
    return {
      // cityComplementBar: null,
      serven_List: [],
      chart: null,
      timeDate: [],
      previousDaySales: [],
      lSales: [],
      headerTitle: ['本周', '上周', '去年'],
      weekOrMonth: '本周', yearOrMonth: '去年',
      label: '', titledata: '',
      weekData: [],
      grossRateData: [],
      salesData: [],
      grossData: [],
      retail_type_id: 0, dept_id: 1, business_circle_id: 0, management_type: 0,
      date_start_year: '', date_end_year: '', data_date: '',
      store_no: '',
      times: '日'
    }
  },
  watch: {
    storeNo() {
      this.$nextTick(() => {
        if (this.storeNo !== null && this.storeNo !== '') {
          this.store_no = this.storeNo
        }
      })
    },
    dataList() {
      this.$nextTick(() => {
        if (this.dataList) {
          this.titledata = this.dataList[this.dataList.length - 1]
          this.getData()
        }
      })
    },
    lunarList() {
      this.$nextTick(() => {
        this.getData()
      })
    },
  },
  created() {
  },
  mounted: function() {
    this.getData()
    this.initChart()
    // const that = this
    window.addEventListener('resize', () => {
      if (this.cityComplementBar) {
        this.cityComplementBar.resize()
      }
    })
  },
  activated: function() {
    if (this.cityComplementBar) {
      this.cityComplementBar.resize()
    }
  },
  beforeDestroy: function() {
    if (!this.cityComplementBar) {
      return
    }
    this.cityComplementBar.dispose()
    this.cityComplementBar = null
  },
  methods: {
    initChart: function() {
      const that = this
      var colors = ['#00D1CB', '#1070F5', '#FFB03F', '#525252']
      this.cityComplementBar = that.$echarts.init(document.getElementById('generaltrend'))
      const option1 = {

        color: colors,

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
         style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' + name + ':' + formatNumToTen(value) + '万元'
          //   }
          //   if (data) {
          //     htmlStr += '<br/>' + '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + A + ';"></span>' + a + ':' + formatNumToTen(data) + '万元'
          //   }
          //   if (percent) {
          //     htmlStr +=
          //       '<br/>' + '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + B + ';"></span>' + b + ':' + formatNumToTen(percent) + '%'
          //   }
          //   return htmlStr
          // }
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name// x轴的名称
              var seriesName = param.seriesName// 图例名称
              var value = param.value// y轴值
              var color = param.color// 图例颜色
              var uni = ''
              if (value === null || value === undefined) {
                value = ''
              }
              if (seriesName === '销售额') {
                uni = '元'
              }
              if (seriesName === '毛利额') {
                uni = '元'
              }
              if (seriesName === '毛利率') {
                uni = '%'
              }
              if (i === 0) {
                htmlStr += xName + that.times + '<br/>'// x轴的名称
              }
              if (value !== '-') {
                htmlStr += '<div>'
                // 为了保证和原来的效果一样，这里自己实现了一个点的效果
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'

                // 圆点后面显示的文本
                htmlStr += seriesName + '：' + formatNumToTen(value) + uni

                htmlStr += '</div>'
              }
            }
            return htmlStr
          }
          // >>>>>>> fd8d3d31ee6997be7c5bd7c293daf77ed36aa57e
        },
        legend: {
          data: ['销售额', '毛利额', '毛利率'],
          top: '5px'
        },
        backgroundColor: '#fff',
        grid: {
          show: true,
          top: '20%', left: '8%', right: '12%', bottom: '10%',
          backgroundColor: '#fff'
        },
        toolbox: {
          // feature: {
          //   dataView: {
          //     show: true,
          //     readOnly: true,
          //     optionToContent: function(opt) {
          //       var axisData = opt.xAxis[0].data
          //       var series = opt.series
          //       var table = '<table style="width:40%;text-align:center"><tbody><tr>' +
          //                      '<td>时间</td>' +
          //                      '<td>' + series[0].name + '</td>' +
          //                      '<td>' + series[1].name + '</td>' +
          //                      '<td>' + series[2].name + '</td>' +
          //                      '</tr>'
          //       for (var i = 0, l = axisData.length; i < l; i++) {
          //         table += '<tr>' +
          //                      '<td>' + axisData[i] + '</td>' +
          //                      '<td>' + series[0].data[i] + '</td>' +
          //                      '<td>' + series[1].data[i] + '</td>' +
          //                      '<td>' + series[2].data[i] + '</td>' +
          //                      '</tr>'
          //       }
          //       table += '</tbody></table>'
          //       return table
          //     }
          //   },
          //   // restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        xAxis: [
          {
            type: 'category',
            name: this.time,
            nameTextStyle: {
              padding: [25, 0, 0, 15]
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0
              // rotate: 30
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#bbbbbb',
                type: 'dashed'
              }
            },
            boundaryGap: false,
            data: this.monthDayList
          },
          {
            type: 'category',
            nameTextStyle: {
              padding: [25, 0, 0, 15]
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0
              // rotate: 30
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#bbbbbb',
                type: 'dashed'
              }
            },
            boundaryGap: false,
            axisTick:{ show: false },// 是否显示坐标轴刻度
            axisLine:{ show: false },// 是否显示坐标轴轴线
            position: 'bottom',// 很重要，如果没有这个设置，默认第二个x轴就会在图表的顶部
            offset: 12,
            data: this.lunarMonthDate

          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额（元）',
            // min: 0,
            position: 'left',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#bbbbbb',
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: colors[3]
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '毛利率（%）',
            /* min: 0,
            max: 100,*/
            position: 'right',
            offset: 80,
            axisLine: {
              lineStyle: {
                color: colors[3]
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '毛利额（元）',
            // min: 0,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: colors[3]
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            // areaStyle: {
            //   color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0,
            //     color: colors[0]
            //   }, {
            //     offset: 1,
            //     color: 'rgb(255, 255, 255,0.2)'
            //   }])
            // },
            data: this.salesData
          },
          {
            name: '毛利额',
            type: 'line',
            yAxisIndex: 2,
            smooth: true,
            // areaStyle: {
            //   color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0,
            //     color: colors[1]
            //   }, {
            //     offset: 1,
            //     color: 'rgb(255, 255, 255,0.2)'
            //   }])
            // },
            data: this.grossData
          },
          {
            name: '毛利率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            // areaStyle: {
            //   color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //     offset: 0,
            //     color: colors[2]
            //   }, {
            //     offset: 1,
            //     color: 'rgb(255, 255, 255,0.2)'
            //   }])
            // },
            data: this.grossRateData
          },
          {
            type: 'line',
            smooth: true,
            areaStyle: {
              color: colors[0]
            },
            markArea:
              {
                label: {
                  show: true, position: 'top', distance: -15, color: colors[0]
                },
                data: this.titledata === '年' ? []:this.serven_List
              }
          },
        ]
      }
      this.cityComplementBar.setOption(option1)

      // tabs css设置(主页面全局获取)
      var a = document.querySelectorAll('.el-tabs__nav')
      for (var i = 0; i < a.length; i++) {
        if (i === 0) {
          a[i].style.padding = '0 0 0 35%'
        } else {
          a[i].style.padding = '0 0 0 40%'
        }
      }
      var b = document.querySelectorAll('.el-tabs__active-bar')
      for (var j = 0; j < b.length; j++) {
        b[j].style.display = 'none'
      }
    },
    getData() {
      this.titledata = this.GLOBAL.label
      if (this.titledata === '月') {
        this.times = ['日']
        this.time = ['日期']
        this.timeDate = this.monthData
        this.grossRateData = []
        this.salesData = []
        this.grossData = []
        this.weekData = []
        this.timeDate = []
        this.serven_List =  getChartHead('本月',this.lunarList)
        for(var da of this.monthDayList) {
          var grossRateData = ''
          var salesData = ''
          var grossData = ''
          for (const data of this.dataList) {
            if (data.data_date !== undefined) {
              if(da == Number(data.data_date.substring(8,10))){
                grossRateData = data.gross_rate
                salesData = data.sales
                grossData = data.gross
              }
            }
          }
          this.grossRateData.push(grossRateData)
          this.salesData.push(salesData)
          this.grossData.push(grossData)
        }
        this.timeDate = this.weekData
        this.initChart()
      }
      if (this.titledata === '年') {
        this.times = ['月']
        this.time = ['月份']
        this.timeDate = this.yearData
        this.grossRateData = []
        this.salesData = []
        this.grossData = []
        this.weekData = []
        this.timeDate = []
        for(var da of this.monthDayList) {
          var grossRateData = ''
          var salesData = ''
          var grossData = ''
          for (const data of this.dataList) {
            if (data.data_date !== undefined) {
              if(da == Number(data.date_year_month.substring(4,6))){
                grossRateData = data.gross_rate
                salesData = data.sales
                grossData = data.gross
              }
            }
          }
          this.grossRateData.push(grossRateData)
          this.salesData.push(salesData)
          this.grossData.push(grossData)
        }
        this.timeDate = this.weekData
        this.serven_List = []
        this.initChart()
      }
      if (this.titledata === '周') {
        this.times = ['日']
        this.time = ['日期']
        this.grossRateData = []
        this.salesData = []
        this.grossData = []
        this.weekData = []
        this.timeDate = []
        this.serven_List =  getChartHead('本月',this.lunarList)
        for(var da of this.monthDayList) {
          var grossRateData = ''
          var salesData = ''
          var grossData = ''
          for (const data of this.dataList) {
            if (data.data_date !== undefined) {
              if(da == Number(data.data_date.substring(8,10))){
                grossRateData = data.gross_rate
                salesData = data.sales
                grossData = data.gross
              }
            }
          }
          this.grossRateData.push(grossRateData)
          this.salesData.push(salesData)
          this.grossData.push(grossData)
        }
        this.timeDate = this.weekData
        this.initChart()
      }
    },
    setWeekDate(date) {
      var data_date = date.substring(8, 10)
      return data_date
    },
    setYearDate(date) {
      var data_yer = date.substring(4, 6)
      return data_yer
    },
    resize() {
      if (this.cityComplementBar) {
        this.cityComplementBar.resize()
      }
    }
  }
}
</script>

<style scoped>

</style>
葵葵籽_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Markdown+Bootstrap图片自适应属性详解
09-02
主要为大家详细介绍了Markdown+Bootstrap图片自适应属性，感兴趣的朋友可以参考一下
js实现背景图自适应窗口大小
10-20
本文分享了背景图自适应窗口大小的实例代码，具有一定的参考作用。下面跟着小编一起来看下吧
Android 自定义ImageView自适应网络请求图片
11-02
width=100%就可以使得图片宽度充满屏幕，高度自适应
echarts自适应屏幕大小切换升级版
04-28 126
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折线图堆叠</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </hea.
HTML常用图表（柱状图，折线图，饼图，关联图，表格）的绘制
热门推荐
数据挖掘+大数据研发+算法学习
05-07 1万+
一：柱状图/折线图的绘制 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width:80%;height:400px;margin: 0 a
html5 趋势图,html5制作简易性能变化折线图
weixin_39814088的博客
06-16 328
1.通过动态设置内部元素高度 =>示例<=示例1#title {margin: 2px;font-family: Helvetica, Arial, sans-serif;font-size: 9px;font-weight: bold;line-height: 15px;color: rgb(0, 255, 255);}#demo {width: 74px;height: 30px;...
html5发展前景图表,信息图表未来发展的三大趋势
weixin_35936869的博客
06-04 204
说起信息图表，现在，很多人都非常喜欢，我也是其中之一。早先的使用者和开拓者一直都想知道信息图表的下一个趋势是什么？当然，现在，我们也想知道。信息图表仅仅是一场刚起步的视觉革命，或者说早已开始的？这是一个很棒的问题。在现在这个无处不商业的时代，设计信息图表早已经不是单纯的数据展现工具，更多的他已经被赋予了营销学问。我们可以先来分析一下这个问题：信息图表之死?在面对不断增加的网络饱和现实，很多人开始担...
html 开源 折线图,ECharts折线图（一）
weixin_42300121的博客
06-09 1021
1、工程目录 2、引入插件angular-1.6.9、echarts-2.2.7 3、js编辑var app = angular.module('app', []);app.controller('lineCtrl', function($scope) {$scope.legend = ['QUANTITY','AVG'];$scope.item = ['一月', '二月', '三月', '四月'...
html5 趋势图,HTML5 画的简单走势图例子
weixin_39759881的博客
06-16 552
HTML5 画的简单走势图例子无标题页111101101111111110101111var c=document.getElementById("myCanvas");var table1 = document.getElementById("testtd");var TDS = table1.getElementsByTagName("td");var cxt2=c.getContext(...
HTML5数据曲线走势图表代码.zip
07-04
HTML5数据曲线走势图表代码是一款API设置默认数据曲线走势图样式，交易曲线图表特效。
js+html实现曲线图
09-22
js+html实现曲线图,大家可以看看,有些地方做的不好,请多多指教.
html+css+js+echarts疫情可视化（折线图）
02-29
疫情期间的确诊人数、死亡人数、至于人数等数据可视化（折线图） 创建静态html项目后，解压包，导入其中两个文件后，用服务器启动html文件即可。
3D折线图 html
12-21
在一个三维座标系下画三维折线图，，，，，，，，，，
统计图-饼图、折线图html页面在线生成统计图表
03-31
统计图-饼图、折线图html页面在线生成图表 普通html页面。js、cs 在table表格中输入值，table可任意增加行、列，（tr、td） 刷新即可生成图表 在线生成统计图表
css图片自适应大小
10-30
css图片自适应大小
自适应图像去噪增强_自适应图像去噪_
10-02
使用PCNN脉冲神经网络对椒盐噪声进行自适应去除，与传统方法对比有较好的提升
echarts 图表自适应窗口大小（无需刷新页面）
attoae的博客
03-03 1271
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...
Html5 canvas 绘制彩票走势图
孤芳自赏
08-01 1万+
因需要 要实现一个类似彩票走势图的功能，初次学Html5 ，很多地方不明白，前段时间也发帖请教过这个问题，也是没给个明确说话，在网上搜了很多，也没有实现的例子，今天仔细研究了下，发现其实也不是很难，现将代码贴出来，共同学习！ 先来一张效果图： 实现的代码： table { border: 0; margin: 0; bor
uni-app自定义指令实现自适应 DPR 加载图片
最新发布
06-06
在uni-app中，可以通过自定义指令来实现自适应DPR加载图片。具体步骤如下： 1. 在项目的`main.js`中注册自定义指令： ```javascript import Vue from 'vue'; import App from './App'; Vue.config.productionTip ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值