元旦假期结束了,积累篇文章收收心吧
bulingbuling 今天的文章要仔细看注释信息哦
// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('div-a'));//服务的url路径var url = '/txieasyui?taskFramePN=TaskInvoke&command=getPriview&start=' + start + '&end=' + end + '&colname=json&colname1={\'dataform\':\'eui_form_data\'}';$.getJSON(url).done(function (json) {//获取数据 var finish = json.result.split('-'); var data1 = []; var brower = [];//组织返回数据 for (var f = 0; f < finish.length; f++) { data1.push(finish[f].split(':')[0]); brower.push({ value: finish[f].split(':')[1], name: finish[f].split(':')[0] }); } option = { title: [{ text: '产品总览', //标题 //top:'5%', //可以通过top ,left的形式指定位置 //left:'20%', x: 'center', //也可以通过x和y的形式指定位置 y: '230', textStyle: { color: '#000', //标题颜色 fontSize: 12, //标题字体大小 } }], tooltip: {//提示框,可以在全局也可以在 trigger: 'item', //提示框的样式 formatter: "{a}
{b}: {c} ({d}%)", color: '#000', //提示框的背景色 textStyle: { //提示的字体样式 color: "black", } }, legend: { //图例 orient: 'vertical', //图例的布局,竖直 horizontal为水平 x: 'right',//图例x轴方向显示在右边 y: 'center',//图例y轴方向显示在中间 data: data1, textStyle: { //图例文字的样式 color: '#333', //文字颜色 fontSize: 12 //文字大小 },//可以通过修改这个方法修改鼠标悬浮时的信息提示 formatter: function (params) { var legendIndex = 0; brower.forEach(function (v, i) { if (v.name == params) { legendIndex = i; } }); return params + " " + brower[legendIndex].value; } }, series: [ { name: '任务状态', type: 'pie', //环形图的type和饼图相同 radius: ['40%', '50%'],//饼图的半径,第一个为内半径,第二个为外半径 avoidLabelOverlap: false, //可以通过color指定颜色 color: ['#DCDCDC', '#96CDCD', '#E6E6FA', '#5F9EA0', '#708090'],//color不指定会自动填充颜色 label: { normal: { //正常的样式 show: true, position: 'left' }, emphasis: { //选中时候的样式 show: true, textStyle: { fontSize: '20', fontWeight: 'bold' } } }, //提示文字 labelLine: { normal: { show: false } }, data: brower //可视化数据(即上面组织的数据) } ] }; myChart.setOption(option); //使option生效});