炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 特殊效果

特殊效果:图标、分割线、标题块、简单表格

看下面的例子:

这个例子使用富文本实现了图标、分割线、标题块和简单的表格等效果。下面我们来看看如何实现这些小国

图标

  • 文本片段的 backgroundColor 可以指定为图片
  • backgroundColor设置为图片后,就可以在文本中使用图标了
  • 相关代码如下
rich: {
Sunny: {
// 这样设定 backgroundColor 就可以是图片了。
backgroundColor: {
image: './data/asset/img/weather/sunny_128.png'
},
// 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。
height: 30
}
}

分割线

  • 分割线实际是通过配置border属性设置边框实现
  • 相关代码如下
rich: {
hr: {
borderColor: '#777',
// 这里把 width 设置为 '100%',表示分割线的长度充满文本块。
// 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。
// 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。
width: '100%',
borderWidth: 0.5,
height: 0
}
}

标题块

  • 使用 backgroundColor 设置背景颜色实现
  • 相关代码如下
// 标题文字居中。
// 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。
formatter: '{tc|Center Title}{titleBg|}',
rich: {
titleBg: {
align: 'right',
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
}
}

简单表格的设定

  • 通过给不同行上纵向对应的文本片段设定同样的宽度就可以了。

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://www.shulanxt.com/visualization/echarts/special-effects/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var weatherIcons = {
'Sunny': 'sunny.png',
'Cloudy': 'cloudy.png',
'Showers': 'raining.png'
};
var option = {
series: [
{
type: 'scatter',
data: [
{
value: [0,0],
label: {
normal: {
formatter: [
'{tc|Center Title}{titleBg|}',
'  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
'{hr|}',
'  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
].join('\n'),
rich: {
titleBg: {
align: 'right'
}
}
}
}
},
],
symbolSize: 1,
label: {
normal: {
show: true,
backgroundColor: '#ddd',
borderColor: '#555',
borderWidth: 1,
borderRadius: 5,
color: '#000',
fontSize: 14,
rich: {
titleBg: {
backgroundColor: '#000',
height: 30,
borderRadius: [5, 5, 0, 0],
padding: [0, 10, 0, 10],
width: '100%',
color: '#eee'
},
tc: {
align: 'center',
color: '#eee'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
}
}
],
xAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: -1,
max: 1
},
yAxis: {
axisLabel: {show: false},
axisLine: {show: false},
splitLine: {show: false},
axisTick: {show: false},
min: 0,
max: 2,
inverse: true
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

另附使用的图片

raining.png
sunny.png
cloudy.png

炫意HTML5 » ECharts – 特殊效果

Java基础教程Android基础教程