计算机图表制作教程,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.查看效果

f91e5eb75c3e7ad2cd98315fbc40dd93.png

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

edf470f7dc3099ef24861f51fd1730d9.png

支付方式统计

#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();

}

}

?>

bc2bd3439b648e4689c7424ff90652b2.png

标签: echarts

顶一下

(0)

0%

踩一下

(0)

0%

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值