// 模块方法 function basicLine () { return { color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'], title: {}, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] } } // 带有区域阴影的线形图 function areaLine () { return { color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'], title: {}, tooltip: { trigger: 'axis' }, xAxis: { name: '日期', type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, series: [{ type: 'line', smooth: true, symbol: 'none', sampling: 'average', itemStyle: { normal: { color: 'rgb(255, 70, 131)' } }, areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320] }] } } // 环形饼图 function ringPie () { return { color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'], title: { text: '', x: 'center' }, 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: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] } ] } } // 一般饼图 function simplePie (text) { return { color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'], title: { text: text || '饼图', x: 'center' }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [{ name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '50%'], data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] } } // 一般柱形图 function simpleBar (text) { return { backgroundColor: '#FFF', color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'], title: { text: text || '柱形图', top: 0, left: '0', textStyle: { color: '#487EC1', fontSize: 14 } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: [], top: '18' }, grid: { left: '3%', right: '5%', bottom: '3%', containLabel: true, show: false }, toolbox: { feature: { dataView: { show: false, readOnly: false } } }, xAxis: { type: 'category', boundaryGap: true, splitLine: { show: false }, data: [], axisLine: { lineStyle: { color: '#333' } } }, yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#DDD' } }, axisLine: { show: false, lineStyle: { color: '#333' } }, nameTextStyle: { color: '#999' }, splitArea: { show: false } }, series: [{ type: 'bar', data: [] }] } } export { basicLine, areaLine, ringPie, simplePie, simpleBar }