视频教程 https://edu.csdn.net/course/play/10747/267820
xxxxxxxxxx当您的系统对统计图表可视化有要求时，如果与后端数据源联通便成了最迫切要求解决的问题
xxxxxxxxxx关于echarts我们采用隐式初始化组件的方式请打开 magicalcoder.js在线用户可查看：http://www.magicalcoder.com/magicaldrag/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js看一下这个文件js 就明白了 这个是拦截器 可以拦截配置的图标控件，捕捉属性后，有部分代码可以自行控制去后端拉取数据
xxxxxxxxxx我们来看一段代码 magicalcoder.js中的代码我们预先给echarts配置了很多个性化属性，在下面的代码里，我们拿到这些属性 包括您配置的数据源信息，然后把数据源信息作为参数 请求提前写好的后端接口，后端根据配置返回echarts的option，再调用myLine.setOption(option);即可让布局器内部的统计图表与后端联通
McECharts.prototype.line = function () {
var charsDoms = document.getElementsByClassName("mc-echarts-line");
for(var i=0;i<charsDoms.length;i++){
var echartDom = charsDoms[i];
//第一步 让用户把基础的配置都通过布局器做好了
var userConfigOption = this.iteratorDomAttrToOption(echartDom);
//此处如果您想写死echart的配置 那么修改即可重新设置userConfigOption里的某个配置
var myLine = echarts.init(echartDom);
{
var api = userConfigOption.api;//数据源配置
//第二步：正常来说 您可能需要从此行开始ajax请求后端带着api参数 然后返回一个option 动态的来设置echarts的数据
var option = {
xAxis:{
type:"category",
data:["数据","部分","请按","文档","打通","后端","接口"]
},
yAxis:{
type:"value"
},
series:[
{
data:[4,6,4],
type:'line',
name:"haha"
},{
data:[,,,,4,6,4],
type:'line',
},{
data:[,,2,0,2],
type:'line',
}
]
}
this.combineSeries(option,userConfigOption);
myLine.setOption(option);
}
}
}
我们有更多图表配置数据源，x轴参数,y轴参数 配置完自动展示数据的示例，欢迎联系我们QQ:799374340