小程序使用echarts(全网最简单详细)

这篇具有很好参考价值的文章主要介绍了小程序使用echarts(全网最简单详细)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概要

小程序中使用echarts(简单详细)

小程序中使用echarts

在echarts官网中有介绍到:echarts-for-weixin 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。
步骤:

1. ec-canvas

点击上方链接下载项目ec-canvas
echart 小程序,echarts,小程序,前端

2. 下载项目

下载这个项目文件夹到自己的电脑上
注意:需注意下载的是哪个版本,之后在echarts官网定制时选用的版本是和这个项目的版本一样的,否则可能出不来,小程序中不会放很多的echarts图表,否则整个项目太大了,会带不动,所以小程序一般是使用在线定制
echart 小程序,echarts,小程序,前端

3. 去echarts官网定制:

点击下载——下载——方法三中的在线定制

在定制页面中选择你需要使用的图表,注意!注意!注意!这里的选择版本,必须和上面下载的ec-canvas中的echarts.js的版本对应,必须!必须!必须!选择完成后,翻到最下面点击下载按钮。

4.点击下载

下载完成后,找到下载的文件:echarts.min.js ,然后在你小程序项目中新建一个components,把echarts这个目录放进去,原目录中的echarts.js删了不要,太大了,换成上一步下载的echarts.min.js,还有一点注意的就是ec-canvas.js的import引入的是原来的echarts.js文件,你需要自己改成刚才下载的文件
echart 小程序,echarts,小程序,前端

5.引入使用

然后就可以引入使用了,在js文件中引入此文件(自己找此文件位置并引入)

 import * as echarts from '../../components/echarts/echarts.min'
 function 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
echart 小程序,echarts,小程序,前端
WXML文件:这里的ec是组件对象,对应着js文件里data的ec

		<view class="ec-box">
			<ec-canvas canvas-id="echart-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-ignore
            axisLabel: {  // 设置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', //  布局朝向(横向/(纵向:vertical))
            right: 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: {
                    // 设置显示label
                    show: 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: {
                    // 设置显示label
                    show: 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步骤知识点,喜欢的话快点赞、收藏吧!谢谢!文章来源地址https://www.toymoban.com/news/detail-611123.html

  • 祝:平安顺遂

到了这里,关于小程序使用echarts(全网最简单详细)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp - 微信小程序端引入 Echarts 图表及使用详细教程,简单快速的解决方案(拒绝复杂的过程,附带详细的使用示例保姆级教程)

    现在各种平台的文章都太乱了,基本上实测无效。。。 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定。 下面是最后的运行结果,随便用的一个图表进行展示,图表更多用法详见文档!

    2024年02月10日
    浏览(50)
  • uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

    想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果: 微信小程

    2024年02月05日
    浏览(103)
  • 在vue项目中使用echarts(echarts不显示,echarts使用详细)

    简述:我们在写大屏项目和vue项目时经常会用到echarts,用于数据统计和可视化,它是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,下面分享下它在项目中的使用方式; 1、安装,下载相关依赖(可用镜像cnpm); 2、在项目

    2024年02月02日
    浏览(44)
  • Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】

    ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。 ECharts 遵循 Apache-2.0 开源协议,免费商用。 ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。 ECharts 包含了以下特性: 丰富的可视化

    2024年02月04日
    浏览(48)
  • Echarts前端可视化库使用教程

    ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 官网:https://echarts.apache.org/zh/inde

    2024年02月10日
    浏览(51)
  • uniapp微信小程序+echarts简单图表以及与后端交互

    效果图:   需要的两个主要文件就是  echarts.min.js   和  echarts.vue  1、 echarts.min.js 可以去官网定制 链接   ECharts 在线构建   或者直接去GitHub - Tawesome666/echarts: echarts 下载 (注意:我这个只有柱状图和折线图) 2、 echarts.vue  可以使用 Visual Studio Code  打开你的文件夹使用命

    2024年02月09日
    浏览(42)
  • vue3关于Echarts的简单使用及配置

    前言: ECharts,一个使用 JavaScript 实现的开源 可视化库 ,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 (1)安装echarts包 (2)安装

    2024年02月07日
    浏览(37)
  • uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化

    前言:之前小程序做的图表,当时没找到太多使用echarts的教程,大多都是二次封装的。连uniapp都是推荐别人二次封装的图表,然后用了之后呢,发现不是自己想要的效果(也许是自己对别人二次封装的代码不够熟悉吧 ),然后干脆摸索下uniapp引入echarts图表(非他人封装的)

    2024年02月09日
    浏览(50)
  • 在vue中使用echarts以及简单关系图的点击事件

    在Vue项目中打开终端执行命令: 下载后在package.json文件中可以看到下载的Echarts版本: 在需要使用Echarts图表的页面中导入: 如果多个地方使用的话可以通过全局引入: 在需要用到echarts的地方设置一个有宽高的div盒子 定义echarts关系图的数据 在methods中定义实例化echarts对象的

    2024年02月08日
    浏览(38)
  • 小程序使用echarts

    参考文档:echarts官网、echarts-for-weixin 第一步引入组件库,可直接从echarts-for-weixin下载,也可以从自定义配置自定义生成,这里我们就不贴了 组件库引入好后,就是页面引用啦,废话不多说,直接上代码 index.js: index.wxml: index.wxss: 此方法也可封装为一个页面生成多个图表 欢

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包