四川省建设厅网站证,百度推广渠道户,wordpress 到访人数,低价机票网站建设小程序中使用echarts
echarts是一个基于JS的数据可视化图标库#xff0c;它提供了直观#xff0c;生动#xff0c;可交互#xff0c;可个性定制的数据可视化图表。一般在vue中会使用到#xff0c;并且官网也详细的说明了如何在vue中使用#xff0c;但是今天我想来探讨的…小程序中使用echarts
echarts是一个基于JS的数据可视化图标库它提供了直观生动可交互可个性定制的数据可视化图表。一般在vue中会使用到并且官网也详细的说明了如何在vue中使用但是今天我想来探讨的是如何在微信小程序中使用echarts
1. ec-canvas的github仓库
官网中介绍到echarts-for-weixin 项目提供了一个小程序组件用这种方式可以方便地使用 ECharts。
可以点击上方链接到官网指定的地址下载图中圈中的项目ec-canvas 2. 下载 ec-canvas项目
然后就是把这个项目下载自己的电脑上但是这里有一个非常重要的一个点决定你的图表是否能够出来在我下面这张图中圈的位置一定要注意自己下的是哪个版本因为echarts.js很大一般使用的话都直接在官网定制小程序中不会放很多echarts图表否则整个项目太大了会跑不起来的。 3. 去echarts官网定制 3.1 定制自己需要的图形接下来就是找到官网去定制自己需要的图表官网地址不用我再说了吧百度也能找到的。 3.2 点击下载进入定制页面 往最下面翻方法三在线定制 在这个页面选择你需要的东西注意注意注意这里的选择版本必须和上面下载的ec-canvas中的echarts.js的版本对应必须必须必须本人当初就是吃了这个亏嘤嘤嘤~选择完成后翻到最下面点击下载按钮。 3.3 然后你就会再开一个窗口下载一个文件这时候就等着就好了。等到OK了说明下载好了 3.4 找到你下载的文件echarts.min.js 准备工作都做好了接下来的都是重点
4. 下载替换
接下来就开始往你的小程序里面植入了。你可以自己新建一个components把echarts这个目录放进去原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件你需要自己改成刚才下载的文件 5. 引入使用
然后在你需要引入echarts的文件中开始操作在js文件中引入此文件自己找此文件位置并引入 import * as echarts from ../../components/echarts/echarts.minfunction bar(canvas, width, height, dpr) {const chart echarts.init(canvas, null, {width: width,height: height,// devicePixelRatio: dpr});canvas.setChart(chart);let option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: bar,showBackground: true,backgroundStyle: {color: rgba(180, 180, 180, 0.2)}}]};chart.setOption(option);return chart;
}在date里写
data: {ec: {onInit: bar},},所有的操作都在option中需要配置其他属性的话可查看配置项手册或者打开示例配置
JSON文件引入的是目录中的ec-canvas.js WXML文件:这里的ec是组件对象对应着js文件里data的ec
view classec-boxec-canvas canvas-idechart-bar ec{{ec}}/ec-canvas
/view
wxss文件给echarts的容器设置宽高
ec1-box {width: 100%;height: 406rpx;
}这样echarts的引入和使用就成功了。
echarts的option配置知识点归纳整理还在更新
通用 1、grid: {left: 0, //距离容器左边的距离right: 0, //距离容器右边的距离bottom: 0, //距离容器下边的距离top: 33, //距离容器上边的距离containLabel: true //是否显示坐标轴},
2、xAxis: [{type: category, // 坐标轴类型// prettier-ignoreaxisLabel: { // 设置X轴坐标轴名称字体样式textStyle: {fontSize: 10,fontWeight: 400,color: #999999,fontFamily: PingFangSC-Regular, PingFang SC},},axisTick: {show: false // 是否显示X轴坐标轴刻度},axisLine: {show: false // 是否显示X轴坐标轴线},data: [07/08, 07/09, 07/10, 今天] // X轴字段数据}],
3、yAxis: [{type: value, // 坐标轴类型axisLabel: { // 设置Y轴坐标轴名称字体样式textStyle: {fontSize: 10,fontWeight: 400,color: #999999,fontFamily: PingFangSC-Regular, PingFang SC},},name: 元, // 设置Y轴坐标轴单位nameTextStyle: { // 单位样式color: #999999, // 字体颜色fontSize: 10, // 字体大小padding: [0, 26, 0, 0], // 内填充fontFamily: PingFangSC-Regular, PingFang SC, // 字体fontWeight: 400, }}],
4、tooltip: { // 提示框组件show: true,confine: false, //是否将 tooltip 框限制在图表的区域内backgroundColor: rgba(0,0,0,0.65), //提示框浮层背景色trigger: axis,dashOffset: 10,padding: 6, //上右下左内边距textStyle: { //提示框浮层的文本样式color: #fff,fontSize: 10,lineHeight: 10,},axisPointer: { //坐标轴指示器配置项type: line, //直线指示器z: 1,lineStyle: {type: dashed,color: #979797,shadowOffsetY: -7,shadowColor: #979797,}},},
5、 legend: { // 图例组件orient: horizontal, // 布局朝向横向/纵向verticalright: 0, // legend位置调整icon: circle, // legend标记样式itemHeight: 8, // legend标记样式高度itemWidth: 8, // legend标记样式宽度itemGap: 12, // legend标记的间距textStyle: { // 图例文本样式fontSize: 10,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 400,color: #666666,padding: [0, 0, 0, 6] //文字与图形之间的左右间距},data: [收入, 支出] //图例数据数组},柱形图 1、series: [{ // 双柱图数据name: 收入,type: bar,barWidth: 10, // 柱状图宽度barGap: 60%,label: {// 设置显示labelshow: true,// 设置label的位置position: top,// 设置label的文字颜色color: #999999,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 500,fontSize: 10,// 格式化label文字formatter: function (data) {return Math.round(data.value).toFixed(2)},},data: [25.6, 76.7, 135.6, 162.2,],itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色offset: 0,color: #FF991C // 0% 处的颜色}, {offset: 0.6,color: #ffb720 // 60% 处的颜色}, {offset: 1,color: #FFCD24 // 100% 处的颜色}], false),barBorderRadius: [3, 3, 0, 0], // 柱形图圆角},},{name: 支出,type: bar,barWidth: 10, // 柱状图宽度label: {// 设置显示labelshow: true,// 设置label的位置position: top,// 设置label的文字颜色color: #999999,fontFamily: PingFangSC-Regular, PingFang SC,fontWeight: 500,fontSize: 10,// 格式化label文字formatter: function (data) {return Math.round(data.value).toFixed(2)},},data: [70.7, 175.6, 182.2, 48.7],itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ // 设置柱状图渐变色offset: 0,color: #4186F5 // 0% 处的颜色}, {offset: 0.6,color: #73affa // 60% 处的颜色}, {offset: 1,color: #9CD2FF // 100% 处的颜色}], false),barBorderRadius: [3, 3, 0, 0], // 柱形图圆角},}]折线图 1、 series: [{ // 折线图数据name: 完成订单,type: line,stack: Total,symbol: circle, // 折线图折点样式(实心)symbolSize: 4, // 折线图折点的大小样式lineStyle: {color: pink // 设置折线颜色},data: [120, 132, 101, 134, 90, 230, 210]},{name: 取消订单,type: line,symbol: circle, // 折线图折点样式(实心)symbolSize: 4, // 折线图折点的大小样式stack: Total,data: [220, 182, 191, 234, 290, 330, 310]},]};小结 以上就是小程序使用echarts步骤知识点了~
