Node+Vue框架下Echart使用小记

 

 基于Node+Vue的项目,其中有一个数据可视化的功能模块需要使用Echarts来做。

关于Echarts的前世今生请戳:https://echarts.baidu.com/echarts2/doc/about.html

我们来总结一下Echarts的优势:

①更新快

②bug少

③样式多

④功能全

⑤文档全

⑥支持node等多种开发环境

但是Echarts在Vue中的使用并不是很爽,可能是因为Echarts需要绑定dom元素,而恰恰主打数据驱动的Vue框架几乎摒弃了一切对dom元素的操纵。不过我也不是很确定,毕竟入行时间很短而且对这两样东西都知之甚少。

项目要实现的效果大致为下面两幅图:

其中点击某个雷达图会弹出包含对应对象的详细信息的柱状图:

图一中雷达图的个数由post请求返回的数组的长度决定,在第一开始,我本来打算使用v-for来进行动态渲染,但是考虑到雷达图的分布情况(并不是单纯地按行分布),而且Echarts的dom绑定已经和Vue框架的数据驱动有了矛盾,继续使用v-for来动态渲染可能会导致灾难。本着别太给自己找事儿的想法,老老实实地在子组件里排了18个span,18个已经足够了。

首先做好准备工作,引入需要的包:

npm install echart

import echarts from "echarts"

 

第一步 构建子组件BlockChart

BlockChart由18个span组成,排列为三行,html代码如下:

<div class="charts">
      <div class="charts-1">
        <span id="chart0" class="chart-span">
        </span>
        <span id="chart1" class="chart-span">
        </span>
        <span id="chart2" class="chart-span">
        </span>
        <span id="chart3" class="chart-span">
        </span>
        <span id="chart4" class="chart-span">
        </span>
        <span id="chart5" class="chart-span">
        </span>
      </div>
      <div class="charts-1">
        <span id="chart6" class="chart-span">
        </span>
        <span id="chart7" class="chart-span">
        </span>
        <span id="chart8" class="chart-span">
        </span>
        <span id="chart9" class="chart-span">
        </span>
        <span id="chart10" class="chart-span">
        </span>
        <span id="chart11" class="chart-span">
        </span>
      </div>
      <div class="charts-1">
        <span id="chart12" class="chart-span">
        </span>
        <span id="chart13" class="chart-span">
        </span>
        <span id="chart14" class="chart-span">
        </span>
        <span id="chart15" class="chart-span">
        </span>
        <span id="chart16" class="chart-span">
        </span>
        <span id="chart17" class="chart-span">
        </span>
      </div>
    </div>

 

因为一个Echarts图表一定要绑定一个dom元素,这里为了方便获取,给每个span都赋予了ID号

构造Echarts图表的代码如下所示:

makeRadarChart(index){
      // if(this.fetching)
      //     return
      var that=this
      if(index>=this.radar_data.length)
        return
      var standard=this.radar_data[index].standard_radar
      var current=this.radar_data[index].current_radar
      var title=this.radar_data[index].name
      var id='chart'+index
      var dom = document.getElementById(id);
      var myChart = echarts.init(dom);
      var app = {};
      var option = null;
      option = {
          title: {
              text: title
          },
          tooltip: {},
          radar: {
              // shape: 'circle',
              name: {
                  textStyle: {
                      fontSize: 13,
                      color: '#fff',
                      borderRadius: 3,
                      padding: [1, 3]
                }
              },
              indicator: [
                { name: '教育', max: 4},
                { name: '社区\n卫生', max: 4},
                { name: '文化\n体育', max: 4},
                { name: '社区\n服务', max: 4},
                { name: '社区\n管理', max: 4},
                { name: '商业\n服务', max: 4}
              ]
          },
          series: [{
              name: '标准vs现状',
              type: 'radar',
              // areaStyle: {normal: {}},
              data : [
                  {
                      value : standard,
                      name : '标准',
                      areaStyle: {
                        normal: {
                            color: 'rgba(255, 50, 50, 0.5)'
                        }
                      },
                      lineStyle: {
                      normal: {
                          color: 'rgba(255, 50, 50, 0.8)'
                      }
                    }
                  },
                  {
                    value : current,
                    name : '现状',
                    areaStyle: {
                      normal: {
                          color: 'rgba(100, 100, 255, 0.5)'
                      }
                    },
                    lineStyle: {
                      normal: {
                          color: 'rgba(100, 100, 255, 0.8)'
                      }
                    }
                  }
              ]
          }]
      }
      if (option && typeof option === "object") {
          myChart.setOption(option, true);
          myChart.on('click', function (params) {
            that.findBarData(index)
          })
      }
    },

其中目标图表需要的容器的ID由index和'chart'字符串拼接而成,这样也可以实现动态绑定元素的效果。

最下面的函数findBarData用来实现弹出对应的新的柱状图,这部分内容下期再讲。

由于精力有限,而且文章主要用于个人记录,本文并未对项目中的很多细节做详细的解释,如果需要详细解读请在下方评论区留言!

如有错误之处请批评指正!