在 uni-app 中初试 uCharts 2.0 画图表 (APP,echarts)
上图为效果图,可以横向滑动图表,以下为实现具体步骤1.首先要去uni-app插件市场下载 uCharts (使用 3.1.0 以上版本的 HBuilderX,否则要升级),选择导入插件2.在template 的代码这里不要把echarts 和ucharts的配置用混,否则,(opts或eopts则会不生效)3.样式(根据实际情况进行设置)4.script (data里面定义的数据)//图表的数据s
上图为效果图,可以横向滑动图表,以下为实现具体步骤
1.首先要去uni-app插件市场下载 uCharts (使用 3.1.0 以上版本的 HBuilderX,否则要升级),选择导入插件https://ext.dcloud.net.cn/plugin?id=271
2.在 template 的代码
这里不要把echarts 和ucharts的配置用混,否则,(opts或eopts则会不生效)
3.样式(根据实际情况进行设置)
4.script (data里面定义的数据)
//图表的数据
serverDataDay: {
categories: [],//x轴的日期
series: [
{
name: "用电",
data: [//具体的数据
],
color: "#21A1FA",
type: "line",
symbol: "circle",
symbolSize: 10,
label: {
show: true,
color: "#21A1FA",
fontWeight: "bold",
},
areaStyle: {//渐变区域,不需要则不加
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 163, 163, 0.2)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(225, 225, 225, 0.2)", // 100% 处的颜色
},
],
global: false,
},
},
itemStyle: {
color: "#00a3a3",
borderWidth: 8,
borderColor: "rgba(0, 163, 163, 0.3)",
},
lineStyle: {
color: "#00a3a3",
width: 3,
},
},
],
},//配置项
columneopts: {
grid: {
left: "3%",
right: "6%",
bottom: 25,
top: 40,
containLabel: true,
},
yAxis: {
splitLine: {
show: true,
lineStyle: {
type: "dashed",
},
},
axisLabel: {
formatter: "{value} KWH",
},
axisPointer: {
snap: true,
},
},
dataZoom: [
{
type: "inside", //slider表示有滑动块的,
start: 0, //数据窗口范围的起始百分比
end: 60, //数据窗口范围的结束百分比
},
],
legend: {
show: false,
},
},
以上步骤就可以实现了,不需要方法获取DOM,这样可以直接实现
如有错误,欢迎大佬指出!!!
更多推荐
所有评论(0)