/** * @author 陈劲松 * @date 2021/6/16 * @description chart option和一些工具 */ import { calculateTextWidth } from '@/utils/tools' const timeData = [['1988/10/4', 89], ['1988/10/5', 95], ['1988/10/6', 94], ['1988/10/7', 86], ['1988/10/8', 95], ['1988/10/9', 93], ['1988/10/10', 88], ['1988/10/11', 80], ['1988/10/12', 89], ['1988/10/13', 83], ['1988/10/14', 85], ['1988/10/15', 83], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 82], ['1988/10/19', 77], ['1988/10/20', 80], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 83], ['1988/10/25', 85], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 80], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 81], ['1988/11/4', 89], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 80], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 8], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]] const timeData2 = [['1988/10/4', 69], ['1988/10/5', 65], ['1988/10/6', 64], ['1988/10/7', 66], ['1988/10/8', 65], ['1988/10/9', 63], ['1988/10/10', 68], ['1988/10/11', 60], ['1988/10/12', 69], ['1988/10/13', 63], ['1988/10/14', 65], ['1988/10/15', 63], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 62], ['1988/10/19', 77], ['1988/10/20', 60], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]] const timeData3 = [['1988/10/4', 49], ['1988/10/5', 45], ['1988/10/6', 44], ['1988/10/7', 46], ['1988/10/8', 45], ['1988/10/9', 43], ['1988/10/10', 48], ['1988/10/11', 40], ['1988/10/12', 49], ['1988/10/13', 43], ['1988/10/14', 45], ['1988/10/15', 43], ['1988/10/16', 73], ['1988/10/17', 79], ['1988/10/18', 42], ['1988/10/19', 77], ['1988/10/20', 40], ['1988/10/21', 75], ['1988/10/22', 79], ['1988/10/23', 75], ['1988/10/24', 63], ['1988/10/25', 65], ['1988/10/26', 77], ['1988/10/27', 74], ['1988/10/28', 70], ['1988/10/29', 60], ['1988/10/30', 71], ['1988/10/31', 73], ['1988/11/1', 77], ['1988/11/2', 78], ['1988/11/3', 61], ['1988/11/4', 69], ['1988/11/5', 79], ['1988/11/6', 76], ['1988/11/7', 60], ['1988/11/8', 77], ['1988/11/9', 72], ['1988/11/10', 68], ['1988/11/11', 58], ['1988/11/12', 54], ['1988/11/13', 50], ['1988/11/14', 41], ['1988/11/15', 36], ['1988/11/16', 43], ['1988/11/17', 45], ['1988/11/18', 54], ['1988/11/19', 49], ['1988/11/20', 45], ['1988/11/21', 42], ['1988/11/22', 41], ['1988/11/23', 33], ['1988/11/24', 23], ['1988/11/25', 19], ['1988/11/26', 18], ['1988/11/27', 13], ['1988/11/28', 4], ['1988/11/29', 4], ['1988/11/30', -4], ['1988/12/1', -4], ['1988/12/2', 0], ['1988/12/3', 4], ['1988/12/4', -2], ['1988/12/5', -11], ['1988/12/6', -2], ['1988/12/7', -1], ['1988/12/8', 3], ['1988/12/9', 6], ['1988/12/10', 10], ['1988/12/11', 10], ['1988/12/12', 14], ['1988/12/13', 10], ['1988/12/14', 7], ['1988/12/15', 1], ['1988/12/16', 0], ['1988/12/17', 1], ['1988/12/18', 2], ['1988/12/19', -6], ['1988/12/20', 3], ['1988/12/21', 9], ['1988/12/22', 3], ['1988/12/23', 4], ['1988/12/24', 12], ['1988/12/25', 6], ['1988/12/26', 0], ['1988/12/27', -8], ['1988/12/28', -10], ['1988/12/29', -13], ['1988/12/30', -10], ['1988/12/31', -13], ['1989/1/1', -3], ['1989/1/2', 5], ['1989/1/3', -5], ['1989/1/4', -9], ['1989/1/5', 1], ['1989/1/6', 5], ['1989/1/7', -1], ['1989/1/8', 4], ['1989/1/9', 9], ['1989/1/10', -1], ['1989/1/11', 6], ['1989/1/12', 1], ['1989/1/13', 11], ['1989/1/14', 11], ['1989/1/15', 7], ['1989/1/16', 1], ['1989/1/17', 0], ['1989/1/18', -5], ['1989/1/19', -9], ['1989/1/20', -8], ['1989/1/21', -12], ['1989/1/22', -6], ['1989/1/23', -6], ['1989/1/24', -9], ['1989/1/25', -13], ['1989/1/26', -23], ['1989/1/27', -25], ['1989/1/28', -21], ['1989/1/29', -21], ['1989/1/30', -22], ['1989/1/31', -31], ['1989/2/1', -23], ['1989/2/2', -17], ['1989/2/3', -19], ['1989/2/4', -26], ['1989/2/5', -28], ['1989/2/6', -24], ['1989/2/7', -26], ['1989/2/8', -33], ['1989/2/9', -30], ['1989/2/10', -39], ['1989/2/11', -37], ['1989/2/12', -36], ['1989/2/13', -32], ['1989/2/14', -39], ['1989/2/15', -30], ['1989/2/16', -28], ['1989/2/17', -19], ['1989/2/18', -19], ['1989/2/19', -20], ['1989/2/20', -17], ['1989/2/21', -26], ['1989/2/22', -26], ['1989/2/23', -32], ['1989/2/24', -35], ['1989/2/25', -44], ['1989/2/26', -44], ['1989/2/27', -48], ['1989/2/28', -46], ['1989/3/1', -53], ['1989/3/2', -57], ['1989/3/3', -50], ['1989/3/4', -44], ['1989/3/5', -43], ['1989/3/6', -48], ['1989/3/7', -58], ['1989/3/8', -67], ['1989/3/9', -58], ['1989/3/10', -53], ['1989/3/11', -52], ['1989/3/12', -59], ['1989/3/13', -67], ['1989/3/14', -59], ['1989/3/15', -51], ['1989/3/16', -49], ['1989/3/17', -40], ['1989/3/18', -39], ['1989/3/19', -48], ['1989/3/20', -48], ['1989/3/21', -52], ['1989/3/22', -47], ['1989/3/23', -53], ['1989/3/24', -46], ['1989/3/25', -53], ['1989/3/26', -57], ['1989/3/27', -67], ['1989/3/28', -65], ['1989/3/29', -68], ['1989/3/30', -62], ['1989/3/31', -53], ['1989/4/1', -46], ['1989/4/2', -42], ['1989/4/3', -40], ['1989/4/4', -45], ['1989/4/5', -42], ['1989/4/6', -47], ['1989/4/7', -46], ['1989/4/8', -55], ['1989/4/9', -60], ['1989/4/10', -55], ['1989/4/11', -45], ['1989/4/12', -50], ['1989/4/13', -40], ['1989/4/14', -48], ['1989/4/15', -53], ['1989/4/16', -51], ['1989/4/17', -46], ['1989/4/18', -43], ['1989/4/19', -38], ['1989/4/20', -44]] const pieData = [ { value: 1, name: 'uniq_domain' }, { value: 2, name: 'bytes' }, { value: 3, name: 'packets' }, { value: 4, name: 'sessions' }, { value: 5, name: 'fqdn_category_name' }, { value: 1, name: 'uniq_domain1' }, { value: 2, name: 'bytes1' }, { value: 3, name: 'packets1' }, { value: 4, name: 'sessions1' }, { value: 5, name: 'fqdn_category_name1' } // { value: 1, name: 'uniq_domain2' }, // { value: 2, name: 'bytes2' }, // { value: 3, name: 'packets2' }, // { value: 4, name: 'sessions2' }, // { value: 5, name: 'fqdn_category_name2' }, // { value: 1, name: 'uniq_domain3' }, // { value: 2, name: 'bytes3' }, // { value: 3, name: 'packets3' }, // { value: 4, name: 'sessions3' }, // { value: 5, name: 'fqdn_category_name3' }, // { value: 1, name: 'uniq_domain4' }, // { value: 2, name: 'bytes4' }, // { value: 3, name: 'packets4' }, // { value: 4, name: 'sessions4' }, // { value: 5, name: 'fqdn_category_name4' } ] export const pieTableDatas = [ { domain: '12306.com', bytes: '170537133646', packets: '123454646', sessions: '26682', children: [ { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' } ] }, { domain: '12306.com', bytes: '170537133646', packets: '123454646', sessions: '26682', children: [ { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' } ] }, { domain: '12306.com', bytes: '170537133646', packets: '123454646', sessions: '26682', children: [ { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' }, { domain: '192.168.36.120', bytes: '170537133646', packets: '123454646', sessions: '26682' } ] }] const line = { xAxis: { type: 'time' }, yAxis: { type: 'value' }, grid: { left: 55, bottom: 45, top: 30 }, legend: { show: true, right: 30, top: 'top', orient: 'horizontal', icon: 'circle', itemGap: 20, itemWidth: 10, textStyle: { padding: [0, 0, 0, 5], fontSize: 14 } }, axisLabel: { fontSize: 14 }, series: [ { name: 'a', type: 'line', smooth: true, symbol: 'none', data: timeData }, { name: 'b', type: 'line', smooth: true, symbol: 'none', data: timeData2 } ] } const lineStack = { xAxis: { type: 'time' }, yAxis: { type: 'value' }, grid: { left: 55, bottom: 45, top: 10, right: 180 }, legend: { show: true, right: 30, top: 'middle', orient: 'vertical', icon: 'circle', itemGap: 20, itemWidth: 10, formatter: function (name) { const width = calculateTextWidth(name) if (width <= 110) { return name } else { const index = name.length / (width / 110.0) - 3 return name.substring(0, index) + '...' } }, textStyle: { padding: [0, 0, 0, 5], fontSize: 14 } }, axisLabel: { fontSize: 14 }, series: [ { name: 'a', type: 'line', stack: 'value', areaStyle: {}, symbol: 'none', data: timeData }, { name: 'bbbbbbbbbbbbbbb aerapo', type: 'line', stack: 'value', areaStyle: {}, symbol: 'none', data: timeData2 }, { name: 'c', type: 'line', stack: 'value', areaStyle: {}, symbol: 'none', data: timeData3 } ] } const pieWithTable = { tooltip: { trigger: 'item' }, legend: { orient: 'vertical', type: 'plain', right: '5%', top: '30%', height: '50%', width: '40%', icon: 'circle', itemWidth: 10, // 设置宽度 itemHeight: 10, // 设置高度 itemGap: 20 }, series: [ { type: 'pie', radius: ['42%', '70%'], center: ['30%', '50%'], data: [], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } const typeOptionMappings = [ { value: 11, option: line }, // 常规折线图 { value: 13, option: lineStack }, // 常规折线图 { value: 31, option: pieWithTable }, // 常规折线图 { value: 91, option: line }, // tab容器 { value: 92, option: line }, // tab页 { value: 93, option: line } // 大标题 ] const typeCategory = { MAP: 'map', TABLE: 'table', ECHARTS: 'echarts', TITLE: 'title', SINGLE: 'singleValue' } export function getTypeCategory (type) { if (isMap(type)) { return typeCategory.MAP } else if (isEcharts(type)) { return typeCategory.ECHARTS } else if (isTable(type)) { return typeCategory.TABLE } else if (isSingleValue(type)) { return typeCategory.SINGLE } else if (isTitle(type)) { return typeCategory.TITLE } } /* 饼图柱状图等 */ export function isEcharts (type) { return type >= 11 && type <= 50 } /* 地图 */ export function isMap (type) { return type >= 1 && type <= 10 } /* 连线地图 */ export function isMapLine (type) { return type === 1 } /* 带统计的折线图 */ export function isEchartsWithStatistics (type) { return type === 12 } /* 单值 */ export function isSingleValue (type) { return type >= 51 && type <= 60 } /* 带折线图的单值 */ export function isSingleValueWithEcharts (type) { return type === 52 } /* 带Table的饼图 */ export function isEchartsWithTable (type) { return type === 31 } /* table */ export function isTable (type) { return type >= 61 && type <= 70 } /* title、tab等 */ export function isTitle (type) { return type >= 91 } export function getOption (type) { const mapping = typeOptionMappings.find(m => m.value === type) return mapping && mapping.option ? mapping.option : null } export const layoutConstant = { HEADER: 'header', FOOTER: 'footer' } export function getLayout (type) { const layout = [] if (!isSingleValue(type) && !isTitle(type)) { layout.push(layoutConstant.HEADER) } if (type === 12 || type === 31) { layout.push(layoutConstant.FOOTER) } return layout } export const heightUnit = 50