import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' import { LineGraph01Config } from './index' import { CreateComponentType } from '@/packages/index.d' import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export interface DataSourceItem { dataname: string; values: number[]; datavalues: (string | number)[][]; } export interface DatasType { title: string; names: string[]; tip: string; dataIndex: number; dataSource: DataSourceItem[]; } export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] export const seriesItem = { type: 'line', smooth: true, symbol: 'none', label: { show: false, position: 'top', color: '#fff', fontSize: 12 }, itemStyle: { color: null, borderRadius: 0 }, lineStyle: { type: 'solid', width: 2, color: '#50BB9A' }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(80,187,154,0.6)' }, { offset: 1, color: 'rgba(80,187,154,0.3)' }] } } } export const option = { dataset: { source: dataJson.dataSource[0].datavalues }, grid: { left: '15%', right: '12%', top: 9, bottom: '25%' }, xAxis: { type: 'category', boundaryGap: false, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#B7BFC6' } }, yAxis: { type: 'value', axisLabel: { formatter: '{value}s', color: "#4C535B" }, axisLine: { show: false }, axisTick: { show: false } }, legend: { show: false }, series: [seriesItem] }; const configSet = { titlefontWeight: 'normal', titlefontSize: 17, titlefontStyle: 'normal', titlecolor: '#ffffff', titlePaddingX: 0, titlePaddingY: 0, isShowButton: false } export { configSet } export default class Config extends PublicConfigClass implements CreateComponentType { public key: string = LineGraph01Config.key public chartConfig = cloneDeep(LineGraph01Config) public mockData = dataJson // 图表配置项 public option = echartOptionProfixHandle(option, includes) }