出行助手Vue项目中echarts的使用

引入：

本项目搭建完成之后，根据官网的提示，在webpack中使用echarts，通过npm安装echarts:npm install echarts --save

使用：

echarts可以作为一个正常的vue组件使用：

<template>
  <div class="echarts">
    <div id="main" class="echarts-canvas"></div>
  </div>
</template>

1. echarts实例挂载：chart = echarts.init(document.getElementById('main'))
2. 设置参数：

chart.setOption({
        //  提示框组件
        tooltip: {
        },
        // 标题组件，包含主标题和副标题。
        title: {
          text: text, //  主标题文本，
          top: '2%' //  离容器上侧的距离。为负数时超出隐藏
        },
        //  直角坐标系 grid 中的 x 轴，
        xAxis: {
          data: ['徒步', '跑步', '骑行', '自驾', '公交', '出租']  //  所有类目名称列表
        },
        //  直角坐标系 grid 中的 x 轴，
        yAxis: {},
        //  系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          name: '总里程',  //  系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
          type: 'bar', // [ default: 'bar' ]
          // itemStyle: {
          // color: 'yellow'
          // },
          //  直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
          grid: {
            left: '2%',
            right: '4%',
            bottom: '0%',
            top: '0%',
            containLabel: true  //  grid 区域是否包含坐标轴的刻度标签。常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
          },
          //  地图区域的多边形 图形样式。
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            //  图形的高亮样式。
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ]
              )
            }
          },
          data: data
        }]
      })

3. 不使用时，销毁此实例：chart.dispose()