本文详细介绍 ECharts 这一基于 JavaScript 的开源可视化库。内容涵盖从官网下载引入、基础 DOM 容器配置，到具体图表实现。通过完整代码示例，演示如何绘制基础雷达图，以及如何结合 Ajax 请求后台数据，动态生成并渲染交互式柱状图，帮助开发者快速掌握前端图表开发流程。
ECharts 简介与引入
在前期的项目开发中，我们使用了 ECharts 图表库，为了方便后续查阅并分享给更多开发者，特此整理这份笔记。
ECharts 是一款优秀的开源前端可视化框架，底层基于轻量级的 Canvas 类库 ZRender，遵循 BSD 开源协议，完全由 JavaScript 编写。
官方访问地址为：http://echarts.baidu.com/
第一步，访问官网并选择适合当前项目的下载版本。
下载地址：http://echarts.baidu.com/download.html
第二步，在项目中引入 ECharts 库文件。
<script src="js/echarts.js"></script>第三步，开始绘制第一个图表。
首先需要在 HTML 中准备一个用于承载图表的 DOM 容器。
<div style="border:2px solid #666;width:49%;height:450px;float:left" id="chartmain"></div>静态雷达图实现
第四步，通过配置项创建一个基础的雷达图。
<script type="text/javascript">
window.onload = function (){
//指定图表的配置项和数据
option = {
//标题
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配（Allocated Budget）'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销（Actual Spending）'
}
]
}]
};
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>至此，一个简单的雷达图便创建完成，下面展示最终的渲染效果。
动态数据柱状图交互
第五步，实现带有动态数据的柱状图。
- 同样，首先创建一个用于展示 ECharts 图表的 DOM 容器。
- 接下来，模拟后台接口返回数据。
- 最后，在前台编写 JavaScript 代码处理数据并渲染图表。
<script type="text/javascript">
window.onload = function (){
//财务看年度的合同金额echart数据源
$.ajax({
url:'',
type:'post',
datatype:'json',
success : function(data){
var partner = new Array();//公司名
for(var i=0;i<data.length;i++){
partner.push(data[i].partner);
}
var odata=[];
for(var i=0;i<data.length;i++){
var obj={};
obj.name=partner[i];
obj.type='bar';
obj.data=[data[i].qyearOne,data[i].qyearTwo,data[i].qyearThree,data[i].qyearFour,data[i].yearOne,data[i].yearTwo,data[i].yearThree,data[i].yearFour,data[i].hyearOne,data[i].hyearTwo,data[i].hyearThree,data[i].hyearFour];
obj.barWidth=30;//宽度
odata.push(obj);
}
option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:partner
},
toolbox: {
show : true,
},
calculable : true,
xAxis : [{
type : 'category',
data :[qyear+'Q1',qyear+'Q2',qyear+'Q3',qyear+'Q4',year+'Q1',year+'Q2',year+'Q3',year+'Q4',hyear+'Q1',hyear+'Q2',hyear+'Q3',hyear+'Q4']
}],
yAxis : [{
type : 'value'
}],
series : odata //前台组装数据
};
//获取要赋值的DOM控件
var myChart = echarts.init(document.getElementById('chartmain'));
//赋值
myChart.setOption(option);
}
});
</script>通过上述前后台交互，动态柱状图即可成功渲染，具体效果如下所示。
关于 JavaScript ECharts 的基本用法介绍到此结束，更多相关内容建议查阅本站过往文章或继续浏览后续教程，感谢支持。