计算机图表制作教程,echarts入门教程 5分钟上手制作ECharts图表

1.新建一个echarts.html文件，为ECharts准备一个具备大小(宽高)的Dom。

ECharts

2.新建script标签引入模块化单文件echarts.js

ECharts

3.新建script标签中为模块加载器配置echarts和所需图表的路径

ECharts

// 路径配置

require.config({

paths: {

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

}

});

4.script标签内动态加载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 = {

tooltip: {

show: true

},

legend: {

data:['销量']

},

xAxis : [

{

type : 'category',

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

}

],

yAxis : [

{

type : 'value'

}

],

series : [

{

"name":"销量",

"type":"bar",

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

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

5.查看效果

参考上述内容+官方相关案例，调整修改，应用到自己的项目中

支付方式统计

#main {

margin: 30px;

}

// 路径配置

require.config({

paths: {

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

}

});

// 使用

require(

[

'echarts',

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

],

function (ec) {

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

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

option = {

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

x: 'left',

data:['微信','支付宝','积分','其他']

},

series: [

{

name:'支付方式',

type:'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: false

}

},

data:[

{value:'{sh:$payment.weixin}', name:'微信'},

{value:'{sh:$payment.alipay}', name:'支付宝'},

{value:'{sh:$payment.integral}', name:'积分'},

{value:'{sh:$payment.other}', name:'其他'}

]

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

获取相关数据

/**

* 支付方式管理

*/

class PaymentAction extends AgentAction{

protected function _initialize() {

parent::_initialize();

}

// 付款方式统计

public function index(){

// 统计订单的支付方式

$orderModel = D('Order');

$payment['weixin'] = $orderModel->getPaytypeOrderNum('weixin');

$payment['alipay'] = $orderModel->getPaytypeOrderNum('alipay');

$payment['integral'] = $orderModel->getPaytypeOrderNum('integral');

$payment['other'] = $orderModel->getPaytypeOrderNum();

$this->assign('payment',$payment);

$this->display();

}

}

?>

标签： echarts

顶一下

(0)

0%

踩一下

(0)

0%