微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
类别:编程学习 浏览量:433
时间:2022-01-19 00:06:23 微信小程序可以用百度的echarts吗
uniapp在微信小程序中使用ECharts的方法今天使用uniapp集成Echarts,实现地图图表的展示
可以参照mpvue-echarts
参照:https://github.com/F-loat/mpvue-echarts
https://ask.dcloud.net.cn/article/36288
进行改进网上有很多教程,但都说的不是很明白,下面直接上步骤
1、npm install echarts mpvue-echarts
执行该命令后,会在node_modules下生成mpvue-echarts、echarts,然后把mpvue-echarts下的src放到components下,然后在https://echarts.apache.org/zh/builder.html定制echarts的js文件,如下图:
地图实现:
<template> <view class="wrap" > <mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" /> </view> </template> <script> import * as echarts from '@/common/echarts.min'; /*chart.min.js为在线定制*/ import * as henanJson from 'echarts/map/json/province/henan.json'; /*chart.min.js为在线定制*/ import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue'; export default { data() { return { echarts, }; }, components: { mpvueEcharts }, onLoad() { }, methods: { renderMap(e) { var mydata = [ { name: '郑州市', value: 100 }, { name: '洛阳市', value: 10 }, { name: '开封市', value: 20 }, { name: '信阳市', value: 30 }, { name: '驻马店市', value: 40 }, { name: '南阳市', value: 41 }, { name: '周口市', value: 15 }, { name: '许昌市', value: 25 }, { name: '平顶山市', value: 35 }, { name: '新乡市', value: 35 }, { name: '漯河市', value: 35 }, { name: '商丘市', value: 35 }, { name: '三门峡市', value: 35 }, { name: '济源市', value: 35 }, { name: '焦作市', value: 35 }, { name: '安阳市', value: 35 }, { name: '鹤壁市', value: 35 }, { name: '濮阳市', value: 35 }, { name: '开封市', value: 45 } ]; let { canvas, width, height } = e; echarts.setCanvasCreator(() => canvas); const chart = echarts.init(canvas, null, { width: width, height: height }); echarts.registerMap('henan', henanJson); canvas.setChart(chart); var optionMap = { tooltip: { trigger: 'item', formatter: '{b}: {c}mg/m³' }, //左侧小导航图标 visualMap: { show:true, min: 0, max: 100, left: 'right', orient:'horizontal', }, //配置属性 series: [ { type: 'map', mapType: 'henan', label: { normal: { show: true }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: '#389BB7', areaColor: '#fff' }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, animation: false, data: mydata //数据 } ] }; //初始化echarts实例 chart.setOption(optionMap); this.$refs.mapChart.setChart(chart); } } }; </script> <style scoped lang="scss"> .wrap { width: 100%; height: 400px; } </style>
效果:
关于地图的json文件,在echarts里面 echarts\map
到此这篇关于uniapp在微信小程序中使用ECharts的方法的文章就介绍到这了,更多相关uniapp使用ECharts内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- uni app开发教程(uniapp+Html5端实现PC端适配)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- yii与uniapp交互(Yii框架的路由配置方法分析)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
热门推荐
- html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
- dedecms模板特点(为DedeCMS换上精美多样的提示信息窗口)
- laravel框架怎么定时任务(laravel Model 执行事务的实现)
- SQL Server与Oracle数据类型的对应关系
- mysql中delete聚合函数查询值(MySQL 分组查询和聚合函数)
- 小鸟云服务器免流搭建(小鸟云服务器如何进行数据盘挂载?Windows)
- vue开发的购物车0.1加0.2(vue实现可改变购物数量的购物车)
- mysqlbinlog优缺点(MySQL Binlog 日志处理工具对比分析)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- SQLServer数据库从高版本降级到低版本实例详解(SQLServer数据库从高版本降级到低版本实例详解)