使用echarts编写app中的图标内容

编写组建

首先在组建components文件夹中添加组建echartEx.vue组建
内容如下,可以看到使用了renderjs来实现的echartsjs和组建之间的沟通数据交互.

<template><view class="content"><view @click="echarts.onClick" :prop="option" :defaultClickNumber="defaultClickNumber":change:defaultClickNumber="echarts.defaultClickNumberMsg" :change:prop="echarts.updateEcharts":id="option.id" class="echarts"></view></view>
</template><script>export default {name: "echarts",props: {option: {type: Object,require: true,default: {id: null}},defaultClickNumber: {type: Number,require: false,default: 0}},methods: {onViewClick(options) {this.$emit("click", options)}}}
</script><script module="echarts" lang="renderjs">export default {name: "echarts",data: {myChart: null,defaultClickNumber: 0,clickData: {}},mounted() {if (typeof window.echarts === 'function') {this.initEcharts()} else {const that = this;const script = document.createElement('script')script.src = 'static/echarts/echarts.min.js'script.onload = function(t) {const scriptLi = document.createElement("script");scriptLi.src = 'static/echarts/echarts-liquidfill.js'scriptLi.onload = that.initEcharts.bind(that)document.head.appendChild(scriptLi)}document.head.appendChild(script)}},methods: {initEcharts() {const that = this;try{ let echartsDoc = document.getElementById(that.option.id);that.myChart = echarts.init(echartsDoc)if (that.myChart) {that.myChart.setOption(that.option)if (that.defaultClickNumber != 0) {that.defaultClick(that.defaultClickNumber);}that.myChart.on('click', param => {that.clickData = param;})}}catch(e){//TODO handle the exception} },defaultClickNumberMsg(newValue, oldValue, ownerInstance, instance) {// 监听 service 层defaultClickNumber数据变更 必须在view上绑定defaultClickNumber 然后在通过change事件监听执行此方法this.defaultClickNumber = newValue;},updateEcharts(newValue, oldValue, ownerInstance, instance) {// 监听 service 层数据变更try{this.myChart.setOption(newValue)}catch(e){//TODO handle the exception}},onClick(event, ownerInstance) {// 调用 service 层的方法 ownerInstance.callMethod('onViewClick', {})},defaultClick(defaultClickNumber) { //默认选中第几个数据if (this.myChart) {this.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: defaultClickNumber});// 当鼠标移入时，如果不是第一项，则把当前项置为选中，如果是第一项，则设置第一项为当前项this.myChart.on('mouseover', function(e) {// this.myChart.dispatchAction({//   type: 'downplay',//   seriesIndex: 0,//   dataIndex: defaultClickNumber// }); this.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});});//当鼠标离开时，把当前项置为选中 this.myChart.on('mouseout', function(e) {index = e.dataIndex;this.myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});});}}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.echarts {width: 100%;height: 100%;}
</style>

接下来我们到echarts官网进行下载想要使用的echart版本的js文件echarts下载，下载完成之后放到根目录的status下的js文件夹内.

开始使用

首先需要在使用的页导入组建内容

import echarts from "@/components/echartsEx.vue";export default {components: {'echarts': echarts},.......}

导入完成之后即可在页面使用，一个简单的例子,页面使用组件，给一个固定的宽高。:options就是echart配置好的options内容

<echarts class="bottom-echarts" :style="{width:'200px',height:'130px'}" :option="chartsTwoOptions" ></echarts>

option如下实例

 {id:'option1',//同一页面使用此id别重复series: [{type: 'gauge',radius: "100%",center: ['50%', '50%'],splitNumber: 25,itemStyle: {color: 'rgba(47, 161, 255, 1)'},progress: {show: false,width: 0},pointer: {show: false},axisLine: {show: true,lineStyle: {color: [[0.03, "rgba(249, 255, 19, 1)"],[0.8, 'rgba(47, 161, 255, 1)'],[1, "rgba(47, 161, 255, 0.2000)"],],width: 30}},axisTick: {show: false},splitLine: {show: true,distance: -90,length: 90,lineStyle: {width: 4,color: '#FFFFFF'}},axisLabel: {show: false,},anchor: {show: false},title: {show: false},detail: {valueAnimation: true,width: '60%',lineHeight: 40,borderRadius: 8,offsetCenter: [0, '-15%'],fontSize: 20,fontWeight: 'bolder',formatter: '{value}\nhPa',color: '#333333'},data: [{value: 20}]}]}

uniapp开发APP使用echart相关推荐

uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...
uniapp开发APP之真机调试
uniapp开发APP之登录授权,获取用户基础信息一:华为手机实时调试APP代码基座流程 1.打开手机的开发者模式,允许USB调试,手机操作流程,进入设置-关于手机,长按版本号(开启开发模式),然后 ...
uni-app 开发App 口令弹窗
我们用uni-app开发APP 电商类总有口令弹窗的需求首先我们写弹窗首先就要想到uni-popup 写弹窗非常方便 <uni-popup ref="popup" roun ...
uniapp开发APP 客服链接
uniapp开发APP嵌套第三方(米多客)客服链接,遇到了无法返回的问题米多客的客服也回复很及时,发了一种解决方法详细描述问题 (记不清在哪看到一句话: 详细的描述出遇到的问题,问题就解决一大半了 ...
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中在使用nvue时候 border的dashed和radius可能会有冲突的解决办法在开发中发现如果同时给了圆角和虚线虚线属性会有问题分别设置圆角四个角 ...
uniapp开发App从开发到上架全过程(三)-上架
当我们的APP开发完毕,最终交付的时候,必然要经历的一个环节,就是APP上架,国内APP上架一般为IOS端appstore上架,安卓端应用商店比较多,最常见的应用商店有华为应用商店.小米应用商店.OP ...
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符
uni-app 开发app 打包后的尺寸与使用hbuilderx预览时不符 uni-app rpx 比例失调 uni-app 开发app 横屏或者屏幕尺寸过大时样式错乱 uni-app 有解决方案 ...
uniapp开发app——nvue
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,但是缺点也很明显,没有足够的api能力,语法限制太大,所以nvue适用于特定场景(需要高性能的区域 ...
uniapp开发app过程中集成友盟统计
uniapp在开发app过程中,需要集成友盟统计,可参考以下流程进行配置友盟统计官网注册并获取appkey 单独创建安卓跟ios的应用,获取到appkey(这里以安卓为例) 配置manifest.j ...

uniapp开发APP使用echart

使用echarts编写app中的图标内容

编写组建

开始使用

uniapp开发APP使用echart相关推荐

最新文章

热门文章