注意：一定要自己引入echarts库
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #canvas-main{ width: 600px; height: 400px; } </style> </head> <body> <div id="canvas-main"> </div> </body> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript"> /*echart数据报表*/ function echarCreate() { var allData = { "lists":[{"name":"星期一","value":"456"}, {"name":"星期二","value":"321"}, {"name":"星期三","value":"226"}, {"name":"星期四","value":"200"} ], "status":"1" } var fn = {}; fn.init = function () { fn.drawEchart(); }; fn.drawEchart = function () { if(allData.status){ var option = fn.setOptions(); var myChart = echarts.init(document.getElementById('canvas-main')); myChart.setOption(option); } }; /*设置好echarts的option参数*/ fn.setOptions = function () { var data = []; for (var i = 0; i < allData.lists.length; i++){ data.push(fn.setData(allData.lists[i].value, allData.lists[i].name)); }; var option = { tooltip: {/*鼠标跟随效果*/ trigger: 'item', formatter: "{b}: {d}%" }, series: [ { name: '',/*数据名称*/ type: 'pie', radius: ['31.25%', '60%'], /*相对容器的大小*/ data: data } ] }; return option; }; /*设置echar的样式，主要是改变颜色 value：option中data数据的value name:option中data数据的name * normal:正常状态下的样式 * emphasis:鼠标移上的样式 * */ fn.setData = function (value, name, normal, emphasis) { var Style = { value: value, name: name, itemStyle: { /*设置扇形的样式*/ normal: { color: normal }, emphasis: { color: emphasis } }, labelLine: { normal: { lineStyle: { /*设置线的样式*/ } }, emphasis: { lineStyle: { /*设置线的样式*/ } } }, label: { normal: { textStyle: {/*文本设置*/ } }, emphasis: { textStyle: { } } } } return Style; }; return fn; } echarCreate().init(); </script> </html>