//摘自官方示例；
具体参数配置：https://echarts.baidu.com/option.html#title
多看必有收获！
<!DOCTYPE html>
<html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <div id="container1" style="height: 100%"></div> <div id="container2" style="height: 100%"></div> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript"> // 柱状图 var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];app.configParameters = {
rotate: { min: -90, max: 90 }, align: { options: { left: 'left', center: 'center', right: 'right' } }, verticalAlign: { options: { top: 'top', middle: 'middle', bottom: 'bottom' } }, position: { options: echarts.util.reduce(posList, function (map, pos) { map[pos] = pos; return map; }, {}) }, distance: { min: 0, max: 10 } };app.config = {
rotate: 90, align: 'left', verticalAlign: 'middle', position: 'insideBottom', distance: 15, onChange: function () { var labelOption = { normal: { rotate: app.config.rotate, align: app.config.align, verticalAlign: app.config.verticalAlign, position: app.config.position, distance: app.config.distance } }; myChart.setOption({ series: [{ label: labelOption }, { label: labelOption }, { label: labelOption }, { label: labelOption }] }); } }; var labelOption = { normal: { show: true, position: app.config.position, distance: app.config.distance, align: app.config.align, verticalAlign: app.config.verticalAlign, rotate: app.config.rotate, formatter: '{c} {name|{a}}', fontSize: 16, rich: { name: { textBorderColor: '#fff' } } } };option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['Forest', 'Steppe', 'Desert', 'Wetland'] }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore: {show: true}, saveAsImage: {show: true} } }, calculable: true, xAxis: [ { type: 'category', axisTick: {show: false}, data: ['2012', '2013', '2014', '2015', '2016'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Forest', type: 'bar', barGap: 0, label: labelOption, data: [320, 332, 301, 334, 390] }, { name: 'Steppe', type: 'bar', label: labelOption, data: [220, 182, 191, 234, 290] } ] };; if (option && typeof option === "object") { myChart.setOption(option, true); } // 饼状图var dom = document.getElementById("container1");
var myChart = echarts.init(dom); var app = {}; option = null; var data = genData(50);option = {
title : { text: '同名数量统计', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: data.legendData,selected: data.selected
}, series : [ { name: '姓名', type: 'pie', radius : '55%', center: ['40%', '50%'], data: data.seriesData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };function genData(count) { var nameList = [ '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危' ]; var legendData = []; var seriesData = []; var selected = {}; for (var i = 0; i < 50; i++) { name = Math.random() > 0.65 ? makeWord(4, 1) + '·' + makeWord(3, 0) : makeWord(2, 1); legendData.push(name); seriesData.push({ name: name, value: Math.round(Math.random() * 100000) }); selected[name] = i < 6; }
return {
legendData: legendData, seriesData: seriesData, selected: selected };function makeWord(max, min) {
var nameLen = Math.ceil(Math.random() * max + min); var name = []; for (var i = 0; i < nameLen; i++) { name.push(nameList[Math.round(Math.random() * nameList.length - 1)]); } return name.join(''); } } ; if (option && typeof option === "object") { myChart.setOption(option, true); } // 雷达图 var dom = document.getElementById("container2"); var myChart = echarts.init(dom); var app = {}; option = null; option = { title: { text: '基础雷达图' }, tooltip: {}, legend: { data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'] }, radar: { // shape: 'circle', name: { textStyle: { color: '#fff', backgroundColor: '#999', borderRadius: 3, padding: [3, 5] } }, indicator: [ { name: '销售（sales）', max: 6500}, { name: '管理（Administration）', max: 16000}, { name: '信息技术（Information Techology）', max: 30000}, { name: '客服（Customer Support）', max: 38000}, { name: '研发（Development）', max: 52000}, { name: '市场（Marketing）', max: 25000} ] }, series: [{ name: '预算 vs 开销（Budget vs spending）', type: 'radar', // areaStyle: {normal: {}}, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data : [ { value : [4300, 10000, 28000, 35000, 50000, 19000], name : '预算分配（Allocated Budget）' }, { value : [5000, 14000, 28000, 31000, 42000, 21000], name : '实际开销（Actual Spending）' } ] }] };; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body></html>