大屏中的图表大使用的是开源可视化图表库Echarts
在线编辑：大屏可视化设计器 - 乐吾乐Le5le
使用
1. 在 html 中引入 echarts资源包
<script src="echarts.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> -->2. 注册
import { register as registerEcharts } from "@meta2d/chart-diagram";
registerEcharts();3. 添加图表图元
const pen = {
name: "echarts",
x: 100,
y: 100,
width: 500,
height: 200,
externElement: true,
disableAnchor: true,
echarts: {
theme: "le-dark",
option: {
grid: {
bottom: 20,
left: 20,
right: 20,
top: 100,
containLabel: true,
},
title: {
text: "标题",
textStyle: {
fontSize: 16,
},
padding: 5,
top: 16,
left: 16
},
// 图例
legend:{
data:['系列1'], // 该数组中的内容要与series中的每项的name对应
textStyle:{
fontSize: 12,
},
itemWidth: 25,
itemHeight: 14,
top: 48,
padding:5,
},
// 提示框组件
tooltip: {
backgroundColor: 'rgba(24,24,24,0.95)',
borderColor: 'rgba(24,24,24,0.95)',
trigger: 'axis',
axisPointer: {
type: "shadow"
},
textStyle: {
fontSize: 12,
fontWeight: 400
}
},
fontSize: 10,
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLabel: {
fontSize: 12,
margin: 10
},
axisTick:{
alignWithLabel:true
}
},
yAxis: {
type: 'value',
name: '单位',
nameGap: 15,
nameTextStyle:{
fontSize: 12,
align:'right',
padding:[0,6,0,6]
},
splitNumber: 2,
minInterval: 50,
axisLabel: {
fontSize: 12,
margin: 10,
textStyle: {
color: '#FFFFFF66', //Y轴内容文字颜色
},
},
},
series: [
{
name:"系列1",
type: 'line',
data: [40, 20, 90, 60, 70, 80],
lineStyle:{
width: 2
},
symbolSize: 5, //小圆点的大小
},
],
},
}
};
meta2d.addPen(pen);
meta2d.inactive();4. 结果
样式修改
选中图表图元，点击数据，点击echarts配置按钮。
按照echarts官方options配置，修改配置项后，点击运行可以查看效果，确定后点击关闭。
数据更新
const pen = {
name: "echarts",
x: 100,
y: 100,
width: 400,
height: 300,
externElement: true,
disableAnchor: true,
echarts: {
option: {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
},
],
},
},
};
meta2d.addPen(pen);
//更新整个数据
meta2d.setValue({
id: pen.id,
'echarts.option.series.0.data':[11,12,13,14,15,16,17]
});
//更新一个数据点
meta2d.setValue({
id: pen.id,
'echarts.option.series.0.data.2':133
});
//更新x轴
meta2d.setValue({
id: pen.id,
'echarts.option.xAxis.data':['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
});echarts地图
echarts官方地图文档说明： echarts地图
echarts.geoUrl 是一个请求地图数据的地址（也可以直接配置地图json数据，echarts.geoJson，但是地图数据一般很大，所以不推荐直接配置。）
echarts.geoName 是给geoUrl请求的数据命名，配置这两个数据，meta2d底层就会完成echarts地图的注册。
options.map直接配置geoName就可以了。
//echarts地图
const pen = {
name: "echarts",
x: 100,
y: 100,
width: 400,
height: 300,
externElement: true,
disableAnchor: true,
echarts: {
"geoName":"china",//地图名
"geoUrl":"https://assets.le5lecdn.com/v/geo/china.json",//地图数据请求地址，具体数据结构见echarts官网
//"geoJson":"...."//地图数据（优先级小于geoUrl）
"option":{
"tooltip":{},
"geo":{
"map":"china", //需要注意这里名称要和geoName对应
"zoom":1.6,
"center":[105,35],
"label":{
"normal":{"show":false},
"emphasis":{"show":false}},
"itemStyle":{"normal":{"borderColor":"rgba(26,82,231, 1)","borderWidth":1,"areaColor":"rgba(7, 52, 126, 0.3)"},
"emphasis":{"areaColor":"#1677ff80","borderColor":"#1677ff"}}},
"series":[
{"name":"涟漪散点",
"tooltip":{"show":false},
"type":"effectScatter",
"coordinateSystem":"geo",
"data":[{"name":"武汉","value":[114.31,30.52]}],
"symbolSize":8,"showEffectOn":"render","rippleEffect":{"brushType":"stroke"},
"hoverAnimation":true,
"label":{"show":true,"formatter":"{b}","position":"bottom","color":"yellow","offset":[0,4]},
"itemStyle":{"normal":{"color":"yellow","shadowBlur":10,"shadowColor":"yellow"}},
"zlevel":1},
{
"name":"散点","tooltip":{"show":false},"type":"scatter",
"coordinateSystem":"geo",
"data":[{"name":"北京","value":[116.4551,40.2539]},{"name":"上海","value":[121.4648,31.2891]},{"name":"广州","value":[113.12244,23.009505]},
{"name":"杭州","value":[119.5313,29.8773]},{"name":"成都","value":[103.9526,30.7617]}],
"symbolSize":8,
"label":{"show":true,"formatter":"{b}","position":"bottom","color":"#36cfc9","offset":[0,-2]},
"itemStyle":{"normal":{"color":"#36cfc9"}},"zlevel":1},
{"name":"数据","tooltip":{"formatter":"{b}"},"animation":false,
"type":"scatter","coordinateSystem":"geo","symbol":"pin","symbolSize":40,
"label":{"normal":{"show":true,"formatter":"{b}","textStyle":{"color":"#fff","fontSize":9}}},"itemStyle":{"normal":{"color":"#F62157"}},"zlevel":6,
"data":[{"name":106,"value":[114.31,30.52]},{"name":96,"value":[116.4551,40.2539]},{"name":94,"value":[121.4648,31.2891]},{"name":86,"value":[113.12244,23.009505]},
{"name":92,"value":[119.5313,29.8773]},
{"name":82,"value":[103.9526,30.7617]}]}]
},
"theme":"le-dark"
}
}
meta2d.addPen(pen);结果：
