代码拉取完成,页面将自动刷新
同步操作将从 liangei/lime-echart 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
一个基于 JavaScript 的开源可视化图表库 查看更多 站点1 | 查看更多 站点2
基于 echarts 做了兼容处理,更多示例请访问 uni示例 站点1 | uni示例 站点2 | 官方示例
Q群:1046793420
echarts v5.1.1
H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
webview
支持 nvue
。在uniapp 插件市场 找到 百度图表 导入即可
1、通过ref
获取节点组件内部 init 方法生成图表
<l-echart ref="chart"></l-echart>
this.$refs.chart.init(config => {...code})
2、通过ref
获取节点组件内部 setChart 方法并 设置 is-enable
(启用初始化) 生成图表
<l-echart ref="chart" is-enable></l-echart>
this.$refs.chart.setChart(chart => {...code})
3、通过props 的 onInit
<l-echart :onInit="onInit"></l-echart>
data() {
return {
onInit: config => {
...code
}
}
}
4、通过 props 的 ec
<l-echart :ec="ec"></l-echart>
data() {
return {
ec: {
option: {
...code
}
}
}
}
<view style="width: 100%; height:500rpx"><l-echart ref="chart"></l-echart></view>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
export default {
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999999'
}
},
axisLabel: {
color: '#666666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: '#37a2da'
// }
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: '#32c5e9'
// }
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: '#67e0e3'
// }
}
}
]
},
};
},
mounted() {
this.$refs.chart.init(config => {
const { canvas } = config;
const chart = echarts.init(canvas, null, config);
canvas.setChart(chart);
chart.setOption(this.option);
// 需要把 chart 返回
return chart;
});
}
}
本插件通过 webview
组件使得 echarts
能在 nvue
里使用。
hybrid
文件夹里再修改路径即可。params
或 ref init
| setChart
方法的第二个参数传递数据<view style="height: 750rpx">
<l-echart ref="chart" isEnable></l-echart>
</view>
export default {
data() {
return {
option: {
// backgroundColor: '#000000',
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
confine: true
},
legend: {
data: ['热度', '正面', '负面']
},
grid: {
left: 20,
right: 20,
bottom: 15,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
yAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310],
itemStyle: {
// emphasis: {
// color: '#37a2da'
// }
}
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220],
itemStyle: {
// emphasis: {
// color: '#32c5e9'
// }
}
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'left'
}
},
data: [-20, -32, -21, -34, -90, -130, -110],
itemStyle: {
// emphasis: {
// color: '#67e0e3'
// }
}
}
]
}
};
},
methods: {
init() {
this.$refs.chart.setChart(chart => {
chart.setOption(option)
}, {option: this.option});
}
},
onReady() {
this.init();
}
};
👎 错误,只会无效的增加打包体积
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';
import ecStat from 'echarts-stat';
export default {
...code
}
👍 正确
export default {
...code
}
👎 错误
const {option} = this
this.$refs.chart.init(config => {
chart.setOption(option);
})
👍 正确
// 所有用函数外里的数据,只要保持跟 this 里的一致
this.$refs.chart.init(config => {
chart.setOption(option);
})
- or -
this.$refs.chart.init(config => {
chart.setOption(this.option);
})
👎 错误
<l-echart />
- or -
this.$refs.chart.init(config => {...code})
👍 正确
<l-echart :params="{option}"/>
- or -
this.$refs.chart.init(config => {...code}, {option: this.option})
is-auto-play
会自动更新图表ref
的 init
创建方式,可获取setOption
设置更新this.$refs.chart.setOption(data)
2d
不支持 真机调试2d
不支持 开发工具预览,也存在划动图表页面无法滚动的问题。toolbox
不支持echarts-gl
不支持参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
custom-style | 自定义样式 | string |
- | - |
type | 指定 canvas 类, 仅支持微信和头条 | string |
2d |
|
ec.option | 图表配置项 | object |
- | |
ec.clear | 是否开启更新时先删除图表样式 | boolean |
false |
|
ec.lazyLoad | 是否开启延时加载 | boolean |
false |
|
params | 仅针对nvue的数据传递,同init函数的第二个参数,两选一 | object |
- | - |
webviewStyles | 仅针对nvue的webview设置样式 | object |
- | - |
onInit | 初始化函数 | function |
- | |
is-auto-play | 是否自动更新,ec.option 数据 发生改动就更新图表 |
boolean |
false |
|
is-enable | 是否启用初始化,启用后无须使用init
|
boolean |
false |
|
is-clickable | 是否派发点击事件 | boolean |
true |
|
is-disable-scroll | 触摸图表时是否禁止页面滚动 | boolean |
false |
|
is-clickable | 是否派发点击事件 | boolean |
true |
参数 | 说明 |
---|---|
init(callback) | 初始化调用函数,callback: 回调函数 |
setChart(chart) | 已经初始化后,请使用这个函数,chart:回调函数参数是图表实例 |
setOption(data) |
图表配置项,用于更新 ,传递是数据 option
|
clear() | 清空当前实例,会移除实例中所有的组件和图表。 |
dispose() | 销毁实例 |
showLoading() | 显示加载 |
hideLoading() | 隐藏加载 |
canvasToTempFilePath(opt) | 用于生成图片 |
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。