diff --git a/resources/assets/src/stylus/admin.styl b/resources/assets/src/stylus/admin.styl index e5d0ce91..976bf18e 100644 --- a/resources/assets/src/stylus/admin.styl +++ b/resources/assets/src/stylus/admin.styl @@ -27,3 +27,9 @@ td .btn-edit font-size 12px color #367fa9 + +#chart + width 600px + height 400px + @media (max-width: 768px) + width: 380px diff --git a/resources/assets/src/views/admin/Dashboard.ts b/resources/assets/src/views/admin/Dashboard.ts index 731f0a35..c38259d8 100644 --- a/resources/assets/src/views/admin/Dashboard.ts +++ b/resources/assets/src/views/admin/Dashboard.ts @@ -1,3 +1,5 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import 'zrender/lib/svg/svg' import echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/line' import 'echarts/lib/component/dataZoom' @@ -11,8 +13,8 @@ interface ChartData { data: number[][] } -async function createChart(el: HTMLCanvasElement) { - const chart = echarts.init(el) +async function createChart(el: HTMLDivElement) { + const chart = echarts.init(el, void 0, { renderer: 'svg' }) chart.setOption({ tooltip: { trigger: 'axis', @@ -71,6 +73,7 @@ async function createChart(el: HTMLCanvasElement) { type: 'category', boundaryGap: false, data: chartData.xAxis, + axisLabel: { margin: 16 }, }, ], series: chartData.labels.map( @@ -89,7 +92,7 @@ async function createChart(el: HTMLCanvasElement) { return chart } -const el = document.querySelector('canvas') +const el = document.querySelector('#chart') if (el) { createChart(el) } diff --git a/resources/views/admin/index.blade.php b/resources/views/admin/index.blade.php index 5dbbc981..bc15df20 100644 --- a/resources/views/admin/index.blade.php +++ b/resources/views/admin/index.blade.php @@ -69,7 +69,7 @@

@lang('admin.index.overview')

- +