v-charts的基础使用及踩坑日常

一、开始使用~

 

1.官网蛮详细哒~附上官网链接：v-charts

2.安装该库：npm i v-charts echarts@4.9.0 -S

！！为什么要安装这个版本呢？因为不指定版本就会安装最新的，再导入到main.js中和在组件使用会报错找不到 echarts/lib/visual/dataColor，就很森气！！！

3.全局引入和按需引入

//我是按需引入柱状图
import VeHistogram from 'v-charts/lib/histogram.common'
Vue.component(VeHistogram.name,VeHistogram);

//我是全局引入
import VCharts from 'v-charts'
Vue.use(VCharts)

4.一个小demo来测试一下是否可以！！！

<!-- 柱状图展示 -->
      <div class="v-charts">
        <ve-histogram :data="chartData"></ve-histogram>
      </div>

//data中定义
data () {
      return {
        chartData: {
            columns: ['日期', '销售额'],
            rows: [
              { '日期': '1月1日', '销售额': 123 },
              { '日期': '1月2日', '销售额': 1223 },
              { '日期': '1月3日', '销售额': 2123 },
              { '日期': '1月4日', '销售额': 4123 },
              { '日期': '1月5日', '销售额': 3123 },
              { '日期': '1月6日', '销售额': 7123 }
            ]
          }
      }
    }

5.展示图：（我们可以哎！！！开熏~~）

二、菜鸟的进阶

1、echarts的配置项手册官网Documentation - Apache ECharts

 2、转载一个干货博主的柱形图小知识（对我这种小菜鸟很受用了！！）可以结合该图去找配置项

3、给每个小柱子设置样式及渐变色！（注意渐变色需要在该组件中引入echarts！！！)

<!--HTML结构-->
<div class="v-charts">
        <ve-histogram class="myve" :data="chartData" 
          :extend="extend"></ve-histogram>
      </div>

import echarts from 'echarts'

extend:{
   // 不展示图例lengend
   legend:{
     show:false
    },
   series:{
              itemStyle:{
                // color:'#F4C569',    
               // barBorderRadius: 5,如果有normal:{}，则写在这里会没有效果
                 //normal有时会和和高亮emphasis:{}成对出现
                normal:{
                   barBorderRadius: 5,
                  // color:'#F4C569',
                  // 颜色渐变效果：需要在使用的组件中import echarts from 'echarts'
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                    [
                        {offset: 0, color: '#FEECB1'},   
                        {offset: 1, color: '#F4C569'}
                    ]
                 )
                }
              },
             label:{//每个小柱子的提示文字
                show:true,
                position:'top',
              },
              barWidth:10,
    }
}