小程序接echart图表库

echart提供了 ECharts 的微信小程序版本，官网有专门的教程
github echarts-for-weixin
这个文件包含所有小程序能使用的图表类型
写了雷达图和玫瑰图，还是有些坑的

雷达图

官网例子是这样的

2.png

option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#FF9F7F"],
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    radar: {
      indicator: [{
        name: '食品',
        max: 500
      },
      {
        name: '玩具',
        max: 500
      },
      {
        name: '服饰',
        max: 500
      },
      {
        name: '绘本',
        max: 500
      },
      {
        name: '医疗',
        max: 500
      },
      {
        name: '门票',
        max: 500
      }
      ]
    },
    series: [{
      name: '预算 vs 开销',
      type: 'radar',
      data: [{
        value: [430, 340, 500, 300, 490, 400],
        name: '预算'
      },
      {
        value: [300, 430, 150, 300, 420, 250],
        name: '开销'
      }
      ]
    }]
  };

我要解决的问题：

1.两个线条的小圆点去掉

2.雷达图底图背景全白色

3.两个雷达图添加填充颜色

4.动态赋值

5.安卓手机展示的图文很小

我最后要展现的是这个

1.png

解决123

options= {
          radar: {
                splitArea:{
                  areaStyle:{
                    color:'#ffffff',  // 2 雷达图底图背景
                  }
                }
              },
            series: [{
                areaStyle: {
                  normal: {
                    opacity: 0.3
                  }
                },  // 3 填充颜色透明度
                symbol:'none',  // 1 去掉小圆点
              }]
            }

解决4.动态赋值

<ec-canvas :ec="ec"></ec-canvas>

export default {
          data() {
            return{
              ec: {  
                // 传 options
                options: {}
              }
            }
          },
          methods:{
            getOption() {
              this.ec= {
                options: ...,
              }
            }
          }
        }

解决5:安卓图文显示

3.png
不知道是怎么回事，echart官网上微信扫描二维码查看的雷达图就是正常的，查了很多，终于找到一个可行的
问题：github上下载的ec-canvas例子字体会变小！
解决办法：去echarts官网定制图表，居然就可以了，字体不会变小，能正常显示，
把下载的ec-canvas文件夹下的echarts.js替换成我们定制的echarts-min.js;名字要修改成echarts.js！
在线定制

玫瑰图

玫瑰图的话，刚开始看实例没有，只有饼图。后来也是找找找...，添加这个就额可以啦

 options: {
              series: [{
                type: 'pie',
                roseType:'radius',  //扇区圆心角展现
                label:{
                  show: false,
                },
                labelLine: {
                  show: false
                },
              }],
            }

如图

options:{
              backgroundColor: "#ffffff",
              color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
              series: [{
                type: 'pie',
                roseType:'radius',  //是否扇区圆心角展现
                label:{
                  show: false,
                },
                labelLine: {
                  show: false
                }, //不显示线条label
                center: ['50%', '50%'], //位置
                radius: [0, '60%'],//图表大小
                data: [{
                  value: 55,
                  name: '北京'
                }, {
                  value: 20,
                  name: '武汉'
                }, {
                  value: 10,
                  name: '杭州'
                }, {
                  value: 20,
                  name: '广州'
                }, {
                  value: 38,
                  name: '上海'
                },
                ]
              }],
              //右边列表
              legend: {
                show: true,
                type: 'scroll',
                orient: 'vertical',
                right: 20,
                top: 40,
                itemWidth: 10,
                itemHeight: 10,
                formatter: function (name) {
                  let data = [{
                    value: 55,
                    name: '北京'
                  }, {
                    value: 20,
                    name: '武汉'
                  }, {
                    value: 10,
                    name: '杭州'
                  }, {
                    value: 20,
                    name: '广州'
                  }, {
                    value: 38,
                    name: '上海'
                  },
                  ]
                  for (let i = 0 ;i< data.length; i++) {
                    if (data[i].name === name) {
                      return name + ' ' + data[i].value
                    }
                  }
                }
              },
              //点击图显示%
              tooltip : {
                trigger: 'item',
                formatter: "{b} :({d}%)"
              }
            }