微信小程序使用Echarts

在微信小程序中使用ECharts

1. 下载插件
首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
下载链接：ecomfe/echarts-for-weixin
2. 运行项目可查看图表示例

 

 3. 使用组件
//ec-canvas是提供的组件，将文件夹ec-canvas复制到自己的项目中

 

 

//配置要应用组件的json文件,我这里是calorimeter.json,一定注意路径要写对。

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

在wxml里面写上如下标签

<view class="box">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

wxss记得再加一下　　

.box {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
} 

　　js里面引入配置相关代码

// 1、引入依赖脚本
import * as echarts from \'../../ec-canvas/echarts\';
// 2、进行初始化数据
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {

    tooltip: {
        trigger: \'axis\',
        axisPointer: {
            type: \'cross\',
            label: {
                backgroundColor: \'#6a7985\'
            }
        }
    },
    legend: {
        data: [\'搜索引擎\']
    },
    grid: {
        left: \'3%\',
        right: \'4%\',
        bottom: \'3%\',
        containLabel: true
    },
    xAxis: [
        {
            type: \'category\',
            boundaryGap: false,
            data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'],
           
			axisLine: {
				show:false,
			}
        }
    ],
    yAxis: [
        {
            type: \'value\',

axisTick: {
show:false
}, // 添加 y轴阶段区分线不显示

            splitLine: {
				show:true, 
				lineStyle:{
                    type:\'dashed\'
                }
			},
			axisLine: {
				show:false,
			}
        }
    ],
    series: [
        {
            type: \'line\',
            stack: \'总量\',
            // label: {
            //     normal: {
            //         show: true,
            //         position: \'top\'
            //     }
            // },
            asmooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "#F53249" // 0% 处的颜色
                    }, {
                      offset: 0.7,
                      color: "rgba(245, 50, 73, 0.12)" // 100% 处的颜色
                     }],
                      globalCoord: false // 缺省为 false
                    }
                  }
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart // 3、将数据放入到里面
    }
  },

  onReady() {
    
  }
});

　　

// 1、引入依赖脚本
import * as echarts from \'../../ec-canvas/echarts\';
// 2、进行初始化数据
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

var option = {
    title: {
      text: \'Echarts学会了没\',
      left: \'center\'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: [\'A\', \'B\', \'C\'],
      top: 50,
      left: \'center\',
      backgroundColor: \'red\',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: \'axis\'
    },
    xAxis: {
      type: \'category\',
      boundaryGap: false,
      data: [\'周一\', \'周二\', \'周三\', \'周四\', \'周五\', \'周六\', \'周日\'],
      // show: false
    },
    yAxis: {
      x: \'center\',
      type: \'value\',
      splitLine: {
        lineStyle: {
          type: \'dashed\'
        }
      }
      // show: false
    },
    series: [{
      name: \'A\',
      type: \'line\',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: \'B\',
      type: \'line\',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: \'C\',
      type: \'line\',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart // 3、将数据放入到里面
    }
  },

  onReady() {
    
  }
});

　　

　　上边两套代码做好的示例图（后面那套代码如下，第一套在后边）

 

 

做的只是一个例子大家懂怎么做就行了，至于具体需求大家在Echarts官网找对应的图形（可修改）。如下：