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>

View Code

 

由于一个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) }) } },

View Code

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

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

因为精力有限,并且文章主要用于我的记录,本文并未对项目中的不少细节作详细的解释,若是须要详细解读请在下方评论区留言!

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