安装 antV-G2
通过 npm 安装
项目中安装 antv/g2
依赖库:
npm install @antv/g2 --save
安装成功:
浏览器引入
可以将脚本下载到本地,也可以直接引入在线资源。
引入在线资源
<!-- 引入在线资源,选择需要的 g2 版本以替换 version 变量 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{
{version}}/dist/g2.min.js"></script>
<!-- 浏览器引入,请使用全局命名空间 G2,如 new Chart() 改为 new G2.Chart,即可运行。 -->
引入本地脚本
<!-- 引入本地脚本 -->
<script src="./g2.js"></script>
使用 script
标签引入 G2
资源时,挂载在 window
上的变量名为 G2
。所以,实例中需要加上 G2
的前缀。如下:
const chart = new G2.Chart({
})
项目使用
新建文件 IndicatorTrend.tsx
:
import {
defineComponent, PropType, onMounted, ref } from 'vue'
import {
useChartAutoResize } from '@/hooks/chart'
import styled from '@/styled-components'
import {
Chart } from '@antv/g2';
export interface TrendListItem {
date: string
city: string
tempvalue: number
}
interface Props {
dataList?: TrendListItem[]
}
const Container = styled.div`
width: 100%;
height: 100%;
`
const TitleBox = styled.h3`
margin-bottom: 10px;
`
const ChartContainer = styled.div`
height:100%;
`
export default defineComponent({
props: {
dataList: {
type: Array as PropType<TrendListItem[]>,
default: () => []
}
},
setup() {
const dataList = ref<TrendListItem[]>([])
const canvasRef = ref<null | HTMLElement>(null)
const chartRef = ref<null | InstanceType<typeof Chart>>(null)
onMounted(() => {
if (canvasRef.value) {
const chart = new Chart({
container: canvasRef.value,
autoFit: true
})
chartRef.value = chart
}
refreshChartView()
})
useChartAutoResize(canvasRef, chartRef)
function refreshChartView(){
const chart: any = chartRef.value
chart.clear()
setTimeout(() => {
chart.data(dataList.value)
chart.scale({
date: {
range: [0, 1],
},
tempvalue: {
nice: true,
},
});
chart.tooltip({
showCrosshairs: true,