微信小程序中如何使用 echarts 柱状图，柱状图圆角渐变，直接cv就能用

 -------本案例效果--------

1、先看目录和 json路径 （根据官网文档下载微信小程序专用ec-canvas。传送门https://github.com/ljy-110/echarts-for-weixin）

2、 html

<view class="progress">
  <view class="container"  style="height: {{canheight}}rpx;">
    <ec-canvas  type="2d" force-use-old-canvas="true" id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

3、css

.progress{
  position: relative;
  margin:30rpx  auto;
  width: 92.5%;
  height: 100%;
  min-height: 450rpx;
  z-index: 1;
  border-radius: 20rpx;

  box-sizing: border-box;
  background: #fff;
  box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.18);
}
.progress .container{
  width: 100%;
}
.progress .container ec-canvas {
  width: 100%;
  height: 100%;
  margin-top: -110rpx;
}

4、js  (import路径和json一样) 

import * as echarts from '../../ec-canvas/echarts';
var dataList = [];
var dataList2 = [];
 
Page({
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    },
    isUseNewCanvas:true,
    canheight:1800
  },
  onReady: function () {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.getData(); //获取数据
  },
  getData: function () {
    //异步数据
    // setTimeout(() => {
    //   dataList = ['田七','赵六','王五','李四','张三','汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎',"1008611"];
    //   dataList2=['250','210','112','82','232','302', '322', '153', '244', '150', '59', '151',"69"]
    // },1500);	
    this.init_echarts();//初始化图表
  },
  //初始化图表
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
 
      });
      chart.setOption(this.getOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  getOption: function () {
   var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['应发', '实发', '待发', '损失']
      },
      grid: {
        left: '1%',
        right: '5%',
        bottom: '3%',
        // top:'1%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value'
        }
      ],
      yAxis: [
        {
          type: 'category',
          axisTick: {
            show: false
          },
          data: ['张三', '李四', '王五', '赵六', '田七', '老八', '胡汉三']
        }
      ],
      series: [
        {
          name: '应发',
          type: 'bar',
          itemStyle: {
            normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 20, 20, 0],
                // 设置颜色渐变
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [
                      { offset: 0, color: '#5087EC' },
                      { offset: 0.5, color: '#2E70EA' },
                      { offset: 1, color: '#0756E6' }
                  ]
              ),
            }
        },

      
          label: {
            show: true,
            position: 'inside'
          },
          emphasis: {
            focus: 'series'
          },
          data: [200, 170, 240, 244, 200, 220, 210]
        },
        {
          name: '实发',
          type: 'bar',
          barGap: 0,
          itemStyle: {
            normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 20, 20, 0],
                // 设置颜色渐变
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [
                      { offset: 0, color: '#68B3BB' },
                      { offset: 0.5, color: '#34ADBA' },
                      { offset: 1, color: '#01A9BB' }
                  ]
              ),
            }
        },
          // color:'#68BBC4',
          label: {
            show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 302, 341, 374, 390, 450, 420]
        },
        {
          name: '待发',
          type: 'bar',
          itemStyle: {
            normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 20, 20, 0],
                // 设置颜色渐变
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [
                      { offset: 0, color: '#8EEB93' },
                      { offset: 0.5, color: '#58A55C' },
                      { offset: 1, color: '#03A40B' }
                  ]
              ),
            }
        },
          // color:'s#58A55C',
          label: {
            show: true,
            // position: 'left'
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 202, 241, 274, 290, 250, 220]
        },
        {
          name: '损失',
          type: 'bar',
          itemStyle: {
            normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 20, 20, 0],
                // 设置颜色渐变
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [
                      { offset: 0, color: '#F2C458' },
                      { offset: 0.5, color: '#F3B627' },
                      { offset: 1, color: '#F1A902' }
                  ]
              ),
            }
        },
          // color:'#F2BD42',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series'
          },
          data: [120,102, 141, 174, 190, 150, 120]
        }
      ]
    };
    return option;
  },
});

5、注：如下图 微信小程序中也   可以定义var let全局变量，

如果需要异步请求真实数据就需要在getadata中异步请求数据，

然后赋值给全局变量var出的 datalist 之后 再执行 this.init_echarts()  ,否则报错不显示。

最后可以在原来data的地方中写成 data：datalist   实现真实数据异步请求赋值