echart php mysql简书_ECharts入门教程

简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。

牛刀小试

先来一个最简单的案例，实现一个条形图。

预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

然后我们导入Echarts类库，做好准备。

然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

],

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

//设置数据

var option = {

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

重点是option里的设置，设置坐标轴、设置数据。

var option = {

//设置坐标轴

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//设置数据

series : [

{

"name":"销量",

"type":"bar",

"data":[5, 20, 40, 10, 24, 20,24,32],

}

]

};

我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

var option = {

//设置标题

title:{

text:'销量图',

subtext:'纯属捏造，如有雷同，人品爆发。'

},

//设置提示

tooltip: {

show: true

},

//设置图例

legend: {

data:['销量']

},

//设置坐标轴

xAxis : [

{

type : 'category',

data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]

}

],

yAxis : [

{

type : 'value'

}

],

//设置数据

series : [

{

"name":"销量",

"type":"bar",

"data":[5, 20, 40, 10, 24, 20,24,32],

}

]

};

至此，一个简单的标准柱状图就生成了。