前言
最近做项目用到了Echarts,顺便总结一下Echarts用法
一、Echarts特点?
- 1.项目开源
- 2.使用简单,官网中为我们封装了JS,会引用就可以得到完美的展示效果
- 3.种类多,eacharts实现简单,各类图形都有,相应的模板,有丰富的 API及文档说明
- 4.兼容性好,基于Html5,有着良好的动画渲染效果
二、使用步骤
1.引入一个Echarts
2.创建一个容器来放Echarts图表
<!--树状图-->
<div class="ibox">
<div class="ibox-title">
<%--<div class="ibox-tools"><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></div>--%>
</div>
<div id="myChart_gong" class="ibox-content" style="height: 450px"></div>
</div>
3.获取数据赋给图表
var myChart_ri = echarts.init(document.getElementById('myChart_gong'));
myChart_ri.showLoading(); //数据加载完之前先显示简单的loading动画
function PowerAnalysis() {
$.ajax({
type: "POST", //请求方式
async: false, //false同步执行,true异步执行
url: <%--URL路径--%>"=" + jQuery.now(), //rand强制页面刷新,防止使用缓存
dataType: "json", //返回数据形式为json
data: {},
success: function (data) {
if (data.bdsonetb != undefined && data.bdsonetb != null && data.bdsonetb != "") {
myChart_ri.hideLoading(); //隐藏加载动画
myChart_ri.setOption({ //加载图表数据
color: ['#008fe6', '#00b78e'], //backgroundColor: 'rgba(1,202,217,.2)',//'#008fe6', '#00b78e'
title: { text: '数据分析', subtext: '' }, tooltip: { trigger: 'axis' }, legend: { data: [ '用电量','用水量'] }, calculable: true,
toolbox: { show: true, feature: { magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } },
grid: { left: '3%', right: '4%', bottom: '3%', top: '22%', containLabel: true }, yAxis: { type: 'value' },
xAxis: [{ type: 'category', data: daylist }],
series: [ data.bdsonetb,data.bdstwotb]//传入数据
//series: [ data.bdstwotb,data.bdsonetb]
});
}
}
});
}
4.效果
5.配置项说明
- Color:为柱状颜色
- tooltip:{
show:true,//是否显示提示框
trigger:‘axis’,//触发方式
backgroundColor:’#131725’,//提示框背景颜色
borderColor:’#131725’,//提示框边框颜色
borderRadius:2,//提示框边框圆角
borderWidth:1,//边框宽度
textStyle:{//文本字体颜色
color:‘rgba(255,255,255,1)’
} - Legend:图表标签
- xAxis:表示x轴的配置,包括轴线样式、label样式、刻度样式、名称样式等
- yAxis:y轴相关设置,与x轴基本相同,常用type为value
- series:series是最重要的配置项,标书数据系列,通过type设置图表类型