图表混搭会使得图表更具表现力、也更有趣味。
ECharts
提供的图表
支持任意图表的混搭
,其中以折线图与柱状图的混搭最为常见,折线图与饼状图的混搭也时有所见。
ECharts是一款原生js写的图表类库,ECharts为打造一款数据可视化平台提供了良好的图表支持。百度Echarts团队提供了几种风格的主题。切换Echarts4.x主题的三个步骤:
- 第1步:下载主题文件。在使用主题之前需要下载主题.js文件(在ECharts官网上下载官方提供的主题,如:macarons.js,或者自定义主题),下载地址:https://www.echartsjs.com/zh/download-theme. html。如图6‑5所示。
- 第2步:引用主题文件。将下载得到的主题.js文件引用到HTML页面中。注意,如果ECharts主题中需要使用到jquery,则还应该再在页面中引用jquery的.js文件。
- 第3步:指定主题名。ECharts对象初始化时,通过第2个参数来指定第2步所引入的主题名。如:var myChart = echarts.init(document.getElementById('main'),主题名) 。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
<script src="js/infographic.js"> </script>
<script src="js/macarons.js"> </script>
<script src="js/jquery-3.3.1.js"> </script>
<script src="js/dark.js"> </script>
<!-- <script src="js/echarts521.js"> </script> -->
</head>
<body>
<div id="themeArea"><label>ECharts 主题切换:</label></div>
<div>
<select name="you select theme:" id="selection">
<option value="infographic">infographic</option>
<option value="macarons">macarons</option>
<option value="jquery-3.3.1">jquery-3.3.1</option>
<option value="dark">dark</option>
<!-- <option value="echarts521">echarts521</option> -->
</select>
</div>
</body>
效果图:
设置水印:
var myChart = echarts.init(document.getElementById("main"));
var waterMarkText = '小智张'; // 设置水印的字符
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.36,//水印颜色
ctx.globalAlpha = 10;
ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
ctx.translate(60, 60); // 设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
在数据中的
series
数组中,通过代码
yAxisIndex:1
,来指定使用第
2
个
y
轴(
0
代表第
1
个
y
轴,
1
代表第
2
个
y
轴)。
{
name: '温度',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
<script src="js/infographic.js"> </script>
<script src="js/macarons.js"> </script>
<script src="js/jquery-3.3.1.js"> </script>
<script src="js/dark.js"> </script>
<!-- <script src="js/echarts521.js"> </script> -->
</head>
<body>
<div id="themeArea"><label>ECharts 主题切换:</label></div>
<div>
<select name="you select theme:" id="selection">
<option value="infographic">infographic</option>
<option value="macarons">macarons</option>
<option value="jquery-3.3.1">jquery-3.3.1</option>
<option value="dark">dark</option>
<!-- <option value="echarts521">echarts521</option> -->
</select>
</div>
<div id="main" style="width: 600px;height:400px;background-color:#00FFFF ;"></div>
<script type="text/javascript">
//基于准备好的dom,初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
var waterMarkText = '小智张'; // 设置水印的字符
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.36,//水印颜色
ctx.globalAlpha = 10;
ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
ctx.translate(60, 60); // 设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
var option = { //指定图表的配置项和数据
backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
title:{
text:'气候温度与降水量蒸发量的关系',
textStyle:{
color:'pink',
},
x:'center',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
top:'30,30',
data: ['蒸发量', '降水量', '温度']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '降水量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '温度',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
$('#selection').change(function(){
myChart.dispose();
let yourtheme = $(this).val();
myChart = echarts.init(document.getElementById('main'),yourtheme);
myChart.setOption(option);
myChart.resize();
});
</script>
</body>
</html>