123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- import { EChartsOption } from 'echarts'
- const { t } = useI18n()
- export const lineOptions: EChartsOption = {
- title: {
- text: t('analysis.monthlySales'),
- left: 'center'
- },
- xAxis: {
- data: [
- t('analysis.january'),
- t('analysis.february'),
- t('analysis.march'),
- t('analysis.april'),
- t('analysis.may'),
- t('analysis.june'),
- t('analysis.july'),
- t('analysis.august'),
- t('analysis.september'),
- t('analysis.october'),
- t('analysis.november'),
- t('analysis.december')
- ],
- boundaryGap: false,
- axisTick: {
- show: false
- }
- },
- grid: {
- left: 20,
- right: 20,
- bottom: 20,
- top: 80,
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- },
- padding: [5, 10]
- },
- yAxis: {
- axisTick: {
- show: false
- }
- },
- legend: {
- data: [t('analysis.estimate'), t('analysis.actual')],
- top: 50
- },
- series: [
- {
- name: t('analysis.estimate'),
- smooth: true,
- type: 'line',
- data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: t('analysis.actual'),
- smooth: true,
- type: 'line',
- itemStyle: {},
- data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }
- ]
- }
- export const pieOptions: EChartsOption = {
- title: {
- text: t('analysis.userAccessSource'),
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data: [
- t('analysis.directAccess'),
- t('analysis.mailMarketing'),
- t('analysis.allianceAdvertising'),
- t('analysis.videoAdvertising'),
- t('analysis.searchEngines')
- ]
- },
- series: [
- {
- name: t('analysis.userAccessSource'),
- type: 'pie',
- radius: '55%',
- center: ['50%', '60%'],
- data: [
- { value: 335, name: t('analysis.directAccess') },
- { value: 310, name: t('analysis.mailMarketing') },
- { value: 234, name: t('analysis.allianceAdvertising') },
- { value: 135, name: t('analysis.videoAdvertising') },
- { value: 1548, name: t('analysis.searchEngines') }
- ]
- }
- ]
- }
- export const barOptions: EChartsOption = {
- title: {
- text: t('analysis.weeklyUserActivity'),
- left: 'center'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: 50,
- right: 20,
- bottom: 20
- },
- xAxis: {
- type: 'category',
- data: [
- t('analysis.monday'),
- t('analysis.tuesday'),
- t('analysis.wednesday'),
- t('analysis.thursday'),
- t('analysis.friday'),
- t('analysis.saturday'),
- t('analysis.sunday')
- ],
- axisTick: {
- alignWithLabel: true
- }
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: t('analysis.activeQuantity'),
- data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
- type: 'bar'
- }
- ]
- }
- export const radarOption: EChartsOption = {
- legend: {
- data: [t('workplace.personal'), t('workplace.team')]
- },
- radar: {
- // shape: 'circle',
- indicator: [
- { name: t('workplace.quote'), max: 65 },
- { name: t('workplace.contribution'), max: 160 },
- { name: t('workplace.hot'), max: 300 },
- { name: t('workplace.yield'), max: 130 },
- { name: t('workplace.follow'), max: 100 }
- ]
- },
- series: [
- {
- name: `xxx${t('workplace.index')}`,
- type: 'radar',
- data: [
- {
- value: [42, 30, 20, 35, 80],
- name: t('workplace.personal')
- },
- {
- value: [50, 140, 290, 100, 90],
- name: t('workplace.team')
- }
- ]
- }
- ]
- }
- export const wordOptions = {
- series: [
- {
- type: 'wordCloud',
- gridSize: 2,
- sizeRange: [12, 50],
- rotationRange: [-90, 90],
- shape: 'pentagon',
- width: 600,
- height: 400,
- drawOutOfBound: true,
- textStyle: {
- color: function () {
- return (
- 'rgb(' +
- [
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160),
- Math.round(Math.random() * 160)
- ].join(',') +
- ')'
- )
- }
- },
- emphasis: {
- textStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
- }
- },
- data: [
- {
- name: 'Sam S Club',
- value: 10000,
- textStyle: {
- color: 'black'
- },
- emphasis: {
- textStyle: {
- color: 'red'
- }
- }
- },
- {
- name: 'Macys',
- value: 6181
- },
- {
- name: 'Amy Schumer',
- value: 4386
- },
- {
- name: 'Jurassic World',
- value: 4055
- },
- {
- name: 'Charter Communications',
- value: 2467
- },
- {
- name: 'Chick Fil A',
- value: 2244
- },
- {
- name: 'Planet Fitness',
- value: 1898
- },
- {
- name: 'Pitch Perfect',
- value: 1484
- },
- {
- name: 'Express',
- value: 1112
- },
- {
- name: 'Home',
- value: 965
- },
- {
- name: 'Johnny Depp',
- value: 847
- },
- {
- name: 'Lena Dunham',
- value: 582
- },
- {
- name: 'Lewis Hamilton',
- value: 555
- },
- {
- name: 'KXAN',
- value: 550
- },
- {
- name: 'Mary Ellen Mark',
- value: 462
- },
- {
- name: 'Farrah Abraham',
- value: 366
- },
- {
- name: 'Rita Ora',
- value: 360
- },
- {
- name: 'Serena Williams',
- value: 282
- },
- {
- name: 'NCAA baseball tournament',
- value: 273
- },
- {
- name: 'Point Break',
- value: 265
- }
- ]
- }
- ]
- }
|