封装echart

最新推荐文章于 2023-03-08 10:52:31 发布
最新推荐文章于 2023-03-08 10:52:31 发布
阅读量98 收藏
点赞数
分类专栏： UI框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43550562/article/details/105070610
版权

采用封装的写法

lineChart

<template>
  <div :id="id" :style="{height:height,width:width}" />
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '400px'
    },
    height: {
      type: String,
      default: '200px'
    },
    color: {
      type: Array,
      default: () => {
        return ['#00B17D', 'red']
      }
    },
    showArea: {
      type: Boolean,
      default: false
    },
    series: {
      type: Array,
      default: () => {
        return [{
          name: 'chart',
          data: []
        }]
      }
    },
    xAxis: {
      type: Object,
      default: () => {
        return {
          showSplitLine: true,
          data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        }
      }
    },
    yAxis: {
      type: Object,
      default: () => {
        return {
          showSplitLine: true,
          name: '(%)'
        }
      }
    },
    interval: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      chart: null,
      option: {
        color: this.color,
        title: {
          top: 20,
          text: this.id,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 15,
            color: '#000'
          },
          left: 0
        },
        grid: {
          top: 80,
          width: '60%',
          bottom: '2%',
          containLabel: true
        },
        legend: {
          tooltip: {
            show: true
          },
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [],
          top: '50',
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: this.color
          },
          formatter: (name) => {
            let clientValue = 0
            if (name === 'GPU占用') return name
            this.series.forEach(element => {
              if (element.name === name) {
                clientValue = element.data[element.data.length - 1] ? element.data[element.data.length - 1] : 0
              }
            })
            return name + ':' + clientValue + this.yAxis.name
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          interval: this.interval,
          type: 'category',
          //   name:'(时间)',
          name: this.xAxis.name,
          // nameLocation: 'start',
          nameGap: '',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            interval: this.interval
          },
          splitLine: {
            show: this.xAxis.showSplitLine, // true || false 网格
            interval: this.interval
          },
          axisTick: { length: 5 },
          data: this.xAxis.data
        },
        yAxis: {
          type: 'value',
          name: this.yAxis.name,
          nameGap: 15,
          //   min: 0,
          //   max: 1000,
          splitNumber: 4,
          // interval: 25,
          boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              color: '#000',
              fontSize: 14,
              fontFamily: 'Microsoft YaHe'
            }
          },
          splitLine: {
            show: this.yAxis.showSplitLine, // true || false 网格
            lineStyle: {
              color: '#000'
            }
          }
        },
        series: []
      }
    }
  },
  watch: {
    xAxis: {
      deep: true,
      handler: function(newVal) {
        const length = newVal.data.length
        let interval = Math.floor(length / 6)
        interval = length % 6 === 0 ? interval - 1 : interval
        this.chart.setOption({
          xAxis: {
            ...newVal,
            axisLabel: {
              interval
            },
            splitLine: {
              interval
            }
          }
        })
      }
    },
    series: {
      deep: true,
      handler(newVal) {
        this.chart.setOption({
          series: newVal
        })
      }
    }
  },
  mounted() {
    this.series.forEach(elemet => {
      this.option.legend.data.push(elemet.name)
    })
    this.$nextTick(() => {
      this.series.forEach(element => {
        this.option.series.push({
          name: element.name,
          type: 'line',
          smooth: true,
          symbol: 'none',
          data: element.data,
          areaStyle: this.showArea ? {
            color: this.color
          } : null,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          itemStyle: {
            normal: {
            }
          }
        })
      })
      this.initChart()
    })
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption(this.option)
    }
  }
}
</script>

pieChart

<template>
  <div />
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    title: {
      type: [String, Number],
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    color: {
      type: Array,
      default: () => {
        return ['#00B17D', '#D2D2D2']
      }
    },
    chartData: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: '%'
    }
  },
  data() {
    return {
      chart: null,
      data: [
        {
          value: Number(this.chartData).toFixed(4) * 100,
          name: '',
          label: {
            show: true
          },
          itemStyle: {
            color: this.color[0]
          }
        },
        {
          value: 100 - Number(this.chartData) * 100,
          name: '',
          itemStyle: {
            color: this.color[1]
          }
        }
      ]
    }
  },
  watch: {
    chartData(newVal) {
      if (newVal !== '') {
        this.data[0].value = Number(newVal).toFixed(4) * 100
        this.data[1].value = 100 - Number(newVal) * 100
        this.chart.setOption({
          series: {
            data: this.data
          }
        })
      }
    },
    title(newVal) {
      if (newVal !== '') {
        this.chart.setOption({
          title: {
            text: newVal
          }
        })
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize()
      }
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const _this = this
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption({
        title: {
          text: _this.title,
          left: 'center',
          bottom: -5,
          textStyle: {
            fontSize: 13,
            color: _this.color[0],
            fontWeight: 'bold'
          },
          subtext: _this.subTitle,
          subtextStyle: {
            fontWeight: 'bold',
            fontSize: 15,
            color: '#000'
          }
        },
        color: _this.color,
        tooltip: {
          show: false
        },
        label: {
        },
        series: [{
          // name: '',
          type: 'pie',
          radius: ['30%', '50%'],
          avoidLableOverLap: false,
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: `{d} ${this.unit}`,
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          clockwise: false,
          legendHoverLinK: false,
          name: _this.name + '占比',
          data: _this.data
        }]
      })
    }
  }
}
</script>

不采用封装的写法

 <!-- 负载路数统计/负载速率统计 -->
    <div class="loadControl" style="margin-top:10px">
      <el-row>
        <el-col class="loadControl-way" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 12}">
          <div id="loadControl-way-chart" :style="{height:'200px'}" style="margin:10px 0 0 10px" />
        </el-col>
        <el-col class="loadControl-speed" :xs="{span: 24}" :sm="{span: 24}" :lg="{span: 11,offset:1}">
          <div id="loadControl-speed-chart" :style="{height:'200px'}" style="margin:10px 0 0 10px" />
        </el-col>
      </el-row>
    </div>

 mounted() {
    const init = this.$echarts.init
    // 负载数路统计
    this.loadControlWay = init(document.getElementById('loadControl-way-chart'))
    // 负载速率统计
    this.loadControlSpeed = init(document.getElementById('loadControl-speed-chart'))
    // 1.获取首页负载统计信息（负载路数&&负载速率）
    this.getLoadInfo()
    // 负载统计信息（负载路数&&负载速率图表）
    this.timer1 = setInterval(() => {
      this.getLoadInfo()
    }, 2000)
    window.addEventListener('resize', () => {
      this.loadControlWay.resize()
      this.loadControlSpeed.resize()
    })
  },

beforeDestroy() {
    this.clearTimer()
  },

methods: {
	clearTimer() {
      if (this.timer1) {
        clearInterval(this.timer1)
      }
      this.timer1 = null
    },
    // 3.获取首页负载统计信息（负载路数&&负载速率）
    getLoadInfo() {
      if (this.loadControlXAxis.length >= 30) {
        this.loadControlXAxis = [0, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
        this.loadControlWayUp.shift()
        this.loadControlWayDown.shift()
        this.loadControlSpeedUp.shift()
        this.loadControlSpeedDown.shift()
      }
      this.loadControlXAxis = [0, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]

      this.loadControlWayUp.push(25 + Math.floor(Math.random() * 10))
      this.loadControlWayDown.push(15 + Math.floor(Math.random() * 10))

      this.loadControlSpeedUp.push(45 + Math.floor(Math.random() * 10))
      this.loadControlSpeedDown.push(35 + Math.floor(Math.random() * 10))

      this.charLoadControlWay()
      this.charLoadControlSpeed()
    },
     // 图表配置
     // 负载路数统计
    charLoadControlWay() {
      const loadControlWayOption = {
        // 主标题
        title: {
          text: '负载路数统计'
        },
        // grid 直角坐标系内绘图网格
        grid: {
          ...commonEchartStyle.grid
        },
        // 图列
        legend: {
          formatter: function() {
            var index = 0
            var clientlabels = ['上行 :', '下行 :']
            var clientcounts = [9, 1]
            clientlabels.forEach(function(value, i) {
              if (value === name) {
                index = i
              }
            })
            return name + ' : ' + clientcounts[index]
          },
          ...commonEchartStyle.legendCommon
        },
        // x轴
        xAxis: {
          interval: 5,
          type: 'category',
          //   name:'(时间)',
          name: '时间',
          // nameLocation: 'start',
          nameGap: '',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            interval: 15
          },
          splitLine: {
            show: false, // true || false 网格
            interval: 5
          },
          axisTick: { length: 5 },
          data: this.loadControlXAxis,
          ...commonEchartStyle.xAxisOption
        },
        // xAxis: {

        //   // data: this.loadControlXAxis,
        //   // ...commonEchartStyle.xAxisOption
        // },
        yAxis: {
          name: '(路)',
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          ...commonEchartStyle.yAxisOption
        },

        tooltip: {
          // 移动鼠标显示实时数据
          show: true,
          trigger: 'axis'
        },
        series: [
          {
            ...commonEchartStyle.seriesUpOption,
            areaStyle: {
              color: '#1496D0'
            },
            data: this.loadControlWayUp,
            lineStyle: {
              width: 1
            }
          },
          // 下行
          {
            ...commonEchartStyle.seriesDownOption,
            areaStyle: {
              color: '#00B17D'
            },
            data: this.loadControlWayDown,
            lineStyle: {
              width: 1
            }
          }
        ],
        color: ['#1496D0', '#00B17D']
      }
      this.loadControlWay.setOption(loadControlWayOption)
    },
    // 负载速率统计
    charLoadControlSpeed() {
      const loadControlSpeedOption = {
        title: {
          text: '负载速率统计'
        },
        grid: {
          ...commonEchartStyle.grid
        },
        legend: {
          formatter: function(name) {
            var index = 0
            var clientlabels = ['上行 :', '下行 :']
            var clientcounts = []
            clientcounts.push(1, 2)
            clientlabels.forEach(function(value, i) {
              if (value === name) {
                index = i
              }
            })
            return name + ' : ' + clientcounts[index]
          },
          ...commonEchartStyle.legendCommon
        },
        xAxis: {
          interval: 5,
          type: 'category',
          //   name:'(时间)',
          name: '时间',
          // nameLocation: 'start',
          nameGap: '',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            interval: 15
          },
          splitLine: {
            show: false, // true || false 网格
            interval: 5
          },
          axisTick: { length: 5 },
          data: this.loadControlXAxis,
          ...commonEchartStyle.xAxisOption
        },
        yAxis: {
          name: '(MB/S)',
          ...commonEchartStyle.yAxisOption
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        series: [
          // 上行
          {
            ...commonEchartStyle.seriesUpOption,
            areaStyle: {
              color: '#1496D0'
            },
            data: this.loadControlSpeedUp,
            lineStyle: {
              width: 1
            }
          },
          // 下行
          {
            ...commonEchartStyle.seriesDownOption,
            areaStyle: {
              color: '#00B17D'
            },
            data: this.loadControlSpeedDown,
            lineStyle: {
              width: 1
            }
          }
        ],
        color: ['#1496D0', '#00B17D']
      }
      this.loadControlSpeed.setOption(loadControlSpeedOption)
    },
}
星期五の夜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts.common.js
03-21
百度开发的免费的好用工具。特别是进入数字经济时代，自己学会对数据进行分析并进行图形化展示，是非常有必要。建议各位学习一下。
echarts.common.min.js
11-14
echarts.common.min.js ECharts，一个纯 Javascript 的图表库。 ECharts提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 多个坐标系的支持 移动端的优化 深度的交互式数据探索 大数据量的展现 多维数据的支持以及丰富的视觉编码手段 动态数据 绚丽的特效 截至2017.11.14 ocaml最新稳定版本 md5: d711ccb6ede14403512bd20840db9b73 大小：391 KB
使用Vue实现数据可视化大屏功能(三)-使用Echarts构建折线图功能
初学者
03-08 809
在之前的文章中我们介绍了Vue中引入Echarts图表的组件，下面我们就来介绍一下如何使用这些组件构建一些基础的组件方便后续使用中的直接引用。
通过npm引入的echart目录_vue按需引入/全局引入echarts
weixin_35890173的博客
02-05 644
npm install echarts -S1.按需引入新建echarts.js公共引入// 文件路径 @/lib/echarts.js 自行配置// 加载echarts，注意引入文件的路径import echarts from ‘echarts/lib/echarts‘// 再引入你需要使用的图表类型，标题，提示信息等import ‘echarts/lib/chart/bar‘import ‘e...
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
weixin_30376453的博客
01-12 1224
1.　　我们在日常的开发中使用Echarts时，不像在学习的过程中是自己在option中的配置项填写图表需要的参数，而是通过ajax请求后台，获取数据后，使用javascript来动态的修改数据，但是有的时候我们在选择一定得条件时获取不到数据，当没有数据时ECharts会默认调用 noDataLoadingOption 这个配置项中的内容来显示一个冒泡的页面，中间显示暂无数据这四个字： 2....
vue组件封装echart折线图
08-30
使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用...
vue 封装 echart
06-25
在Vue.js框架中封装ECharts是一项常见的任务，它允许开发者将ECharts图表组件化，方便在项目中重复使用。ECharts是一款由百度开发的开源可视化库，提供了丰富的图表类型和强大的交互功能，广泛应用于数据可视化场景...
vue之将echart封装为组件
08-27
Vue之将Echarts封装为组件 本文主要介绍了如何将Echarts封装为组件在Vue项目中使用，通过以雷达图为案例，一步步讲解如何将Echarts封装为能重复调用的组件。 一、安装Echarts 在使用Echarts之前，需要先安装...
react-native-demo:基于react-native封装echart，使用webview包裹echart
05-15
1.下载依赖 npm install 2.启动 //ios react-native run-ios //android react-native run-android 3.如果想了解react-native使用webview封装Echarts请看这里：
echart的封装代码
01-16
echart的封装代码
echarts x和数据对应_echarts中的xAxis的data中数据显示不出来
weixin_39664456的博客
12-22 3437
今天在做一个统计时，用到了echarts做图表，在静态页面中能展现出来，如图：引到了项目中时 xAxis 中的 data数据却显示不出来了， 还显示了一段英文如图所示：JS代码：(function(){// 路径配置require.config({paths: {echarts : WEB_URL + '/resources/js/echarts-2.2.7/build/dist'}});requ...
echarts的使用和响应式
suiyuest的博客
07-01 1138
vue数据可视化实现响应式
vue大屏中对echarts基础模板的封装
03-16 2185
目录 一、下载echarts 、vue-awesome、@jiaminghi/data-view、lib-flexible 二、在main.js中引入 三、封装echarts 四、使用 五、div包装 六、引用模板 七、使用 一、下载echarts 、vue-awesome、@jiaminghi/data-view、lib-flexible cnpm i -S dayjs echart@4.9.0 vue-awesome @jiaminghi/data-view lib-flexi.
echarts的二次封装
weixin_44707050的博客
12-05 1153
echarts的第一次封装 echarts的二次封装【二次封装】：包含通用的配置，不会改变的配置使用场景：比如，页面上的柱状图，样式相同，但是文字颜色，数据，标题等不同，所以二次封装的echarts作用就是通用配置，灵活配置从获取数据的页面上获取把series , x,y轴上的数据抽离 上述代码 要注意 获取数据的页面的灵活配置和通用配置的合并使用的是lodash的merge方法【merge】：相同属性会覆盖，不同属性会合并；获取数据的页面上获取灵活配置
Echarts柱状图
热门推荐
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
echart饼状图、柱状图上显示百分比、数据值
wangchaohpu的博客
08-14 2万+
柱状图： echart 3.0写法： series:[{ label: { normal: { show: true, position: 'inside', formatter: '{c},({d}%)'//多值的嵌套 } } }] echart 2.0写法： se...
当eChart的Y轴必须是整数时，对原echarts_common.js进行补充
lth1156187401的博客
10-13 3559
JS: setCharts('charts',options,true);] ECHARTS_COMMON.JS: //在初始化echart的Y轴时，对其间隔和最小间隔数进行判断和指定，重写原Item_yAxis方法 //新增字段isLength，用来判断是否进入整数判断，如果Y轴必须要整数的话，设置为true function setCharts(charts,op
Echart饼图、柱状图、折线图(pie、bar、line)添加点击事件
qq345425170的专栏
08-08 1万+
var myChart= echarts.init(document.getElementById('myChart'));            myChart.on('click', function (param) {                        alert('点击了我！');             }); Echart事件参数可以去config.js查找
vue axios封装echart
最新发布
08-24
在Vue中，可以使用axios库来封装ECharts图表。具体步骤如下： 1. 在Vue项目中安装axios库，可以使用以下命令： ``` npm install axios ``` 2. 在需要使用ECharts的组件中引入axios和ECharts组件： ```javascript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值