前端基础学习-v-charts使用

由于没有接触过e-charts，直接看的v-charts，所以无法对比两者的优劣，但是v-charts使用还是很方便的

效果

下面说一下初学者安装引用以及使用的步骤

1、npm安装

npm i v-charts echarts -S

安装成功后可以看见package.json出现对应的依赖

2、在main.js中引入v-charts

import VCharts from 'v-charts'
Vue.use(VCharts)

这里有个小问题
如果安装成功后，运行报错

此时可以将echart版本到4.x.x，再重新安装依赖就可以成功解决了

3、v-charts使用

我这里只记录了最基础的使用方法
第一个柱状图添加了基础设置，其他图只对其进行了最基础的数据绑定

html

  <div class="statistic_box">
    <div class="content_box">
      <el-row type="flex" justify="center" :gutter="20">
        <el-col :span="12">
          <div class="statistic_content">
            <p>柱状图</p>
            <div class="chartBox">
              <ve-histogram
                :extend="verticalChartExtend"
                :data="chartData"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="statistic_content">
            <p>横向柱状图</p>
            <div class="chartBox">
              <ve-bar
                :data="chartData">
              </ve-bar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" :gutter="20">
        <el-col :span="12">
          <div class="statistic_content">
            <p>折线图</p>
            <div class="chartBox">
              <ve-line
                :data="chartData"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="statistic_content">
            <p>饼图</p>
            <div class="chartBox">
              <ve-pie
                :data="chartData"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

这里只是最基础的使用】

对于柱状图的基本设置
参数设置以及数据都是放在data当中

// 柱状图相关参数
      verticalChartExtend: {
        legend: {
          show: false
        },
        grid: {
          left: '5%',
          containLabel: true,
          top: '5%',
          bottom: '5%'
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              color: '#6c7293',
              fontSize: 14
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#6c7293'
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#6c7293',
              fontSize: 14
            }
          },
          splitLine: {
            show: true
          },
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: {
          type: 'bar',
          label: {
            show: true,
            position: 'top',
            color: '#409EFF'
          },
          itemStyle: {
            normal: {
              color: '#409EFF'
            }
          }
        }
      },

共用的数据

      chartData: {
        columns: ['date', 'count'],
        rows: [
          { 'date': '1月1日', 'count': 123 },
          { 'date': '2月3日', 'count': 222 },
          { 'date': '4月5日', 'count': 324 },
          { 'date': '5月3日', 'count': 2443 },
          { 'date': '6月2日', 'count': 1522 }
        ]
      }

css

<style lang='scss' scoped>
.statistic_box {
  padding: 20px;
  .content_box {
    .sort_title {
      display: flex;
      margin-bottom: 10px;
      span{
        margin-left: 10px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        color: #444657;
      }
    }
    .statistic_content {
      border: 1px solid #ebedf2;
      p {
        margin: 0px;
        padding: 15px 0 15px 20px;
        border-bottom: 1px solid #ebedf2;
        background-color: #f9f9fc;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        color: #444657;
        &::before {
          content: "";
          margin-top: 3px;
          float: left;
          width: 6px;
          height: 16px;
          background-color: #409EFF;
          border-radius: 4px;
          margin-right: 8px;
        }
      }
    }
  }
}
</style>