ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 [1]
2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。
使用
Demo
折线图
炳汉的独白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts测试</title>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
//初始化
var myecharts = echarts.init(document.getElementById("main"));
//设置数据
var options = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
//设置
myecharts.setOption(options);
</script>
</body>
</html>
南丁格尔图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
//初始化
var myecharts = echarts.init(document.getElementById("main"));
//设置数据
var options = {
backgroundColor: '#2c343c',
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
}
]
};
//设置
myecharts.setOption(options);
</script>
</body>
</html>
echarts
axios.get("/report/getMemberReport").then((res)=>{
myChart1.setOption(
{
title: {
text: '会员数量'
},
tooltip: {},
legend: {
data:['会员数量']
},
xAxis: {
data: res.data.obj.months
},
yAxis: {
type:'value'
},
series: [{
name: '会员数量',
type: 'line',
data: res.data.obj.memberCount
}]
});
});
xml 格式
第一种方法：
用转义字符把">"和"<"替换掉，就没有问题了。
附：XML转义字符
< < 小于号
> > 大于号
& & 和
' ’ 单引号
" " 双引号
第二种方法：
因为这个是xml格式的，所以不允许出现类似">"这样的字符
<![CDATA[ ]]>符号进行说明，将此类符号不进行解析
<![CDATA[ 这里写你的sql ]]>
<!--统计会员数量：从指定日期向前统计-->
<select id="selectCountByMonth" parameterType="string" resultType="int">
<![CDATA[
SELECT COUNT(*) FROM t_member WHERE regTime <= #{value}
]]>
</select>
TODO 没有解决的问题，获取登录用户的id
在Project 中可以找到 TODO Idea 小技巧