官网

https://www.hcharts.cn/demo/highcharts

html

<div id="container" style="min-width:400px;height:400px"></div>

js

Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: '2018年1月浏览器市场份额' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Sogou Explorer', y: 1.64 }, { name: 'Opera', y: 1.6 }, { name: 'QQ', y: 1.2 }, { name: 'Other', y: 2.61 }] }]});

这里的数据通常都是从数据库查询处理出来的。
而它的格式是json的格式。
所以通过ajax获取比较方便一些。

public function get_series_data() { if ($date = $_POST['date']) { $sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 and add_time > '.strtotime($date." 00:00").' and add_time < '.strtotime($date ." 23:59").' group by appid order by count desc'; } else { $sql = 'select count(*) as count ,appid from tf_bag_lucky_log where is_receive=1 group by appid order by count desc'; } // 统计 $data_list = Db::query($sql); $series_data = []; foreach ($data_list as $k=>&$v) { $xcx_info = Db::name('xcx')->where('appid',$v['appid'])->find(); if ($k == 0) { $series_data[$k] = [ 'name' => $xcx_info['name'], 'y' => $v['count'], 'sliced' => true, 'selected' => true, ]; } else { $series_data[$k] = [ 'name' => $xcx_info['name'], 'y' => $v['count'], ]; } } $this->json->setErr(0, '操作成功'); $this->json->setAttr('data', $series_data); $this->json->Send();}

js改造

showContainer(date);function showContainer(date) { $.ajax({ url: "get_series_data", data: { "date" : date, }, type: "POST", dataType: "json", success: function (data) { Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: '金猪中奖来自小程序' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ name: '占比', colorByPoint: true, data: data.data, // data: [{ // name: 'Chrome', // y: 1000, // sliced: true, // selected: true // }, { // name: 'Internet Explorer', // y: 11.84 // }, { // name: 'Firefox', // y: 10.85 // }, { // name: 'Edge', // y: 4.67 // }, { // name: 'Safari', // y: 4.18 // }, { // name: 'Other', // y: 7.05 // }] }], }); }, error: function () { alert("网络错误"); }});

highcharts 非常灵活，非常方便。ajax，json获取数据，效果刚刚的。