1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- import * as echarts from 'echarts/core'
- import {
- DatasetComponent,
- TitleComponent,
- TooltipComponent,
- GridComponent,
- TransformComponent
- } from 'echarts/components'
- import { LineChart } from 'echarts/charts'
- import { UniversalTransition } from 'echarts/features'
- import { CanvasRenderer } from 'echarts/renderers'
- echarts.use([
- DatasetComponent,
- TitleComponent,
- TooltipComponent,
- GridComponent,
- TransformComponent,
- LineChart,
- CanvasRenderer,
- UniversalTransition
- ])
- // 折线图
- export const echartsFu1 = (dom: HTMLDivElement) => {
- const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
- const option = {
- grid: {
- left: '-30', //距左边边框的距离
- right: '0%', //距右边边框的距离
- bottom: '10', //距下面边框的距离
- top: '15', //距上面边框的距离
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisLine: {
- show: false //隐藏X轴
- },
- axisTick: {
- show: false //隐藏刻度线
- },
- axisLabel: {
- show: false //隐藏X轴文字
- }
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [182, 193, 988, 546, 454, 1111, 1200],
- type: 'line'
- // showSymbol: false,
- // smooth: true
- },
- {
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line'
- // showSymbol: false,
- // smooth: true
- }
- ],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- },
- formatter: (val: any) => {
- return `${val[0].axisValue}<br/>入馆${val[0].data}件<br/>入藏${val[1].data}件`
- }
- }
- }
- option && myChart.setOption(option)
- }
|