首页 > 网络编程 > JavaScript > VUE中如何渲染Echarts动画柱状图

VUE中如何渲染Echarts动画柱状图

福牛 3月 27, 2023 48 0

柱状图

效果图

-1

安装Echarts依赖

要在vue中使用Echarts 需要先安装依赖

  1. npm install echarts —save

这是我的Echarts版本

  1. “echarts”: “^4.0.4”

第一步：在template减免 容器dom

  1. <template>
  2.      <div class=“min-body”>
  3.          <div style=“width:80vw;height: 80vh“ id=“EchartsAnimate” ref=“docement”></div>
  4.      </div>
  5. </template>

第二步：初始化 Echarts

-2

注意：此处有一方法，是用于适配 Echarts 字体适配大屏的

  1. chartsRelativeSize(percent, derection) {
  2.                  var windowW = this.$refs.docement.offsetWidth;
  3.                  var windowH = this.$refs.docement.offsetHeight
  4.                  var r = 0;
  5.                  if (‘h’ === derection) {
  6.                      r = percent * windowH / 100;
  7.                  } else {
  8.                      r = percent * windowW / 100;
  9.                  }
  10.                  return r;
  11. },

使用：

-3

第三步：请求数据 加载柱状图动画

原理：设置定时器，删除Echarts 柱状图的第一个数据的同属压入数组的最后一个

  1. for(var i=0;i<this.echartsData.list.length && i<5;i++){
  2.                      option.xAxis[0].data.push( that.echartsData.list[i].mc);
  3.                      option.series[0].data.push( that.echartsData.list[i].sysl);
  4.                      option.series[1].data.push( that.echartsData.list[i].dysl);
  6.      }
  7.                  myCharts.setOption(option);
  9.                  if(window.hbfxInterval){
  10.                      clearInterval(window.hbfxInterval);
  11.                  }
  12.                  window.hbfxIndex = 0;
  13.                  window.hbfxInterval = setInterval(function () {
  14.                      option.xAxis[0].data.shift();
  15.                      option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
  17.                      option.series[0].data.shift();
  18.                      option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
  20.                      option.series[1].data.shift();
  21.                      option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
  23.                      myCharts.setOption(option);
  24.      window.hbfxIndex ++;
  25.                  },2000)

完整页面代码：

  1. <template>
  2.      <div class=“min-body”>
  3.          <div style=“width:80vw;height: 80vh“ id=“EchartsAnimate” ref=“docement”></div>
  4.      </div>
  5. </template>
  7. <script>
  8.      export default {
  9.          name: “EchasrtsAnimate”,
  10.          data:function () {
  11.              return {
  12.                  echartsData:{“size”:21,“list”:[{“dysl”:“70”,“mc”:“刑事警情”,“dm”:“01”,“sysl”:“89”},{“dysl”:“75”,“mc”:“行政（治安）警情”,“dm”:“02”,“sysl”:“107”},{“dysl”:“4”,“mc”:“交通类警情”,“dm”:“03”,“sysl”:“21”},{“dysl”:“7”,“mc”:“火灾事故”,“dm”:“04”,“sysl”:“9”},{“dysl”:“43”,“mc”:“群众求助”,“dm”:“05”,“sysl”:“71”},{“dysl”:“5”,“mc”:“举报投诉”,“dm”:“06”,“sysl”:“10”},{“dysl”:“20”,“mc”:“纠纷”,“dm”:“08”,“sysl”:“44”},{“dysl”:“1”,“mc”:“灾害事故”,“dm”:“09”,“sysl”:“1”},{“dysl”:“56”,“mc”:“其他行政违法”,“dm”:“10”,“sysl”:“71”},{“dysl”:“56”,“mc”:“经济案件类警情”,“dm”:“11”,“sysl”:“65”},{“dysl”:“9429”,“mc”:“违法犯罪警情”,“dm”:“20”,“sysl”:“12320”},{“dysl”:“25597”,“mc”:“交通警情”,“dm”:“21”,“sysl”:“29575”},{“dysl”:“272”,“mc”:“火灾事故”,“dm”:“22”,“sysl”:“369”},{“dysl”:“6040”,“mc”:“群众求助”,“dm”:“23”,“sysl”:“7307”},{“dysl”:“4203”,“mc”:“举报投诉”,“dm”:“24”,“sysl”:“4983”},{“dysl”:“27”,“mc”:“群体事件”,“dm”:“25”,“sysl”:“44”},{“dysl”:“9679”,“mc”:“纠纷”,“dm”:“26”,“sysl”:“12396”},{“dysl”:“44”,“mc”:“灾害事故”,“dm”:“27”,“sysl”:“70”},{“dysl”:“109”,“mc”:“扬言”,“dm”:“28”,“sysl”:“146”},{“dysl”:“17”,“mc”:“警情备案”,“dm”:“30”,“sysl”:“23”},{“dysl”:“75”,“mc”:“其他警情”,“dm”:“90”,“sysl”:“69”}]}
  13.              }
  14.          },
  15.          mounted(){
  16.                  this.loadEchartsAnimate()
  17.          },
  18.          methods:{
  19.              chartsRelativeSize(percent, derection) {
  20.                  var windowW = this.$refs.docement.offsetWidth;
  21.                  var windowH = this.$refs.docement.offsetHeight
  22.                  var r = 0;
  23.                  if (‘h’ === derection) {
  24.                      r = percent * windowH / 100;
  25.                  } else {
  26.                      r = percent * windowW / 100;
  27.                  }
  28.                  return r;
  29.              },
  30.              loadEchartsAnimate(){
  31.                  var that = this
  32.                  var echarts = require(‘echarts’);
  33.                  var myCharts = echarts.init(document.getElementById(‘EchartsAnimate’));
  34.                  var option = {
  35.                      color:[‘#407FFF’,‘#00CCCD’],
  36.                      tooltip : {
  37.                      trigger: ‘axis’,
  38.                      textStyle:{
  39.                      color:‘#ffffff’,
  40.                      fontSize: this.chartsRelativeSize(0.5, ‘r’)
  41.                      },
  42.                      formatter: function (params) {
  43.                      var arr = [];
  44.                      params.forEach(function (item) {
  45.                      var N=item.seriesName;
  46.                      var V = ”;
  47.                      if(item.value>100000000){//亿
  48.                      V += (item.value/100000000).toFixed(1) + ‘亿’;
  49.                      }else if( item.value>10000){//万
  50.                      V += (item.value/10000).toFixed(1) + ‘万’;
  51.                      }else{
  52.                      V += item.value;
  53.                      }
  54.                      var a = {name:N,value:V};
  55.                      arr.push(a);
  56.                      });
  57.                      var num = ”;
  58.                      arr.forEach(function (item) {
  59.                      num += item.name+“:”+item.value+“<br/>”;
  60.                      });
  61.                      return params[0].name +“<br>”+ num;
  62.                      }
  63.                      },
  64.                      grid: {
  65.                      left: ’25vw’,
  66.                      right: ’25vw’,
  67.                      bottom: ‘9vh’,
  68.                      top:’30vh’,
  69.                      containLabel: true
  70.                      },
  71.                      /*dataZoom:[{
  72.                      show: true,
  73.                      height: 10,
  74.                      bottom: 0,
  75.                      startValue:0,
  76.                      endValue:4,
  77.                      handleIcon: ‘path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z’,
  78.                      handleSize: ‘100%’,
  79.                      handleStyle:{color:”#ddd” },
  80.                      textStyle:{color:”#666666″},
  81.                      borderColor:”#eee”
  82.                      }],*/
  83.                      legend: {
  84.                      orient: ‘horizontal’,
  85.                      top:‘0’,
  86.                      x: ‘right’,
  87.                      itemWidth:15,
  88.                      itemHeight:15,
  89.                      textStyle:{
  90.                      color:‘#fff’,
  91.                      fontSize: this.chartsRelativeSize(0.5, ‘r’)
  92.                      },
  93.                      data:[‘上月’,‘本月’]
  94.                      },
  95.                      xAxis: [
  96.                      {
  97.                      type: ‘category’,
  98.                      axisLine: {
  99.                      lineStyle: {
  100.                      type: ‘solid’,
  101.                      color: ‘#2E3950’,//左边线的颜色
  102.                      width: ‘1’//坐标线的宽度
  103.                      }
  104.                      },
  105.                      axisLabel: {
  106.                      textStyle: {
  107.                      color: ‘#fff’,//坐标值得具体的颜色,
  108.                      fontSize: this.chartsRelativeSize(0.5, ‘r’)
  109.                      },
  110.                      interval:0
  111.                      },
  112.                      axisTick:false,
  113.                      data: [/*’崇川区’,’港闸区’,’通州区’,’如东县’,’海安市’,’启东市’,’海门市’,’如皋市’*/]
  114.                      }
  115.                      ],
  116.                      yAxis: [
  117.                      {
  118.                      type: ‘value’,
  119.                      axisLine: {
  120.                      lineStyle: {
  121.                      type: ‘solid’,
  122.                      color: ‘#2E3950’,//左边线的颜色
  123.                      width: ‘1’//坐标线的宽度
  124.                      }
  125.                      },
  126.                      axisLabel: {
  127.                      textStyle: {
  128.                      color: ‘#e6e6e6’,//坐标值得具体的颜色,
  129.                      fontSize: this.chartsRelativeSize(0.5, ‘r’)
  131.                      }
  132.                      },
  133.                      axisTick:false,
  134.                      splitLine: { //坐标轴在grid区域中的分隔线（网格中的横线）
  135.                      show: true,
  136.                      lineStyle: {
  137.                      color: [‘#2E3950’],
  138.                      width: 1,
  139.                      type: ‘solid’,
  140.                      }
  141.                      },
  142.                      splitArea: {//坐标轴在grid区域中的分隔区域（间隔显示网格区域）
  143.                      interval: 1, //显示间隔的规律
  144.                      show: true,
  145.                      areaStyle: {//分隔区域的样式
  146.                      color: [‘rgba(255,255,255,0.03)’, ‘rgba(255,255,255,0)’]
  147.                      }
  148.                      }
  149.                      }
  150.                      ],
  151.                      series : [
  152.                      {
  153.                      name:‘上月’,
  154.                      type:‘bar’,
  155.                      barGap:0,
  156.                      barWidth:15,
  157.                  data:[/*15,48,40,32,21,41,38,65*/]
  158.                      },
  159.                      {
  160.                      name:‘本月’,
  161.                      type:‘bar’,
  162.                      barGap:0,
  163.                      barWidth:15,
  164.                      data:[/*43,12,56,67,12,45,41,15*/]
  165.                      }
  166.                      ]
  167.                  };
  168.                  for(var i=0;i<this.echartsData.list.length && i<5;i++){
  169.                      option.xAxis[0].data.push( that.echartsData.list[i].mc);
  170.                      option.series[0].data.push( that.echartsData.list[i].sysl);
  171.                      option.series[1].data.push( that.echartsData.list[i].dysl);
  172.                  }
  173.                  myCharts.setOption(option);
  175.                  if(window.hbfxInterval){
  176.                      clearInterval(window.hbfxInterval);
  177.                  }
  178.                  window.hbfxIndex = 0;
  179.                  window.hbfxInterval = setInterval(function () {
  180.                      option.xAxis[0].data.shift();
  181.                      option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
  183.                      option.series[0].data.shift();
  184.                      option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
  186.                      option.series[1].data.shift();
  187.                      option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
  189.                      myCharts.setOption(option);
  190.                      window.hbfxIndex ++;
  191.                  },2000)
  192.              }
  193.          }
  194.      }
  195. </script>
  197. <style scoped>
  198. .min–body{
  199.      width: 100%;
  200.      height: 100%;
  201.      overflow: hidden;
  202.      background: #010827;
  203. }
  205. </style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论