使用 Apachr Echarts

Apache ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ApacheEcharts 官网

https://echarts.apache.org/zh/index.html

官方示例

https://echarts.apache.org/examples/zh/index.html

Vite + Vue3 环境使用 Echarts

1. 安装 Echarts

npm install echarts --save

2. 使用 Echarts

2.1 页面创建一个 div 并指定其 id 属性；

2.2 加载 Echarts 组件包

 import * as echarts from 'echarts';

2.3 在 onMounted 生命周期内使用 Echarts 组件。

示例代码

<template>
    <ga-page>
        <template v-slot:body>
			<div 
			style="margin-top:25px;"
			class="ga-block">
			    <div id="eChartShow" style="width:100%; height:500px;"></div>
			</div>
        </template>
    </ga-page>
</template>
<script setup>
import * as echarts from 'echarts';
onMounted(() => {
	var chartDom = document.getElementById('eChartShow');
	var myChart = echarts.init(chartDom);
	var option;
	
	// Generate data
	let category   = [];
	let dottedBase = +new Date();
	let lineData   = [];
	let barData    = [];
	for (let i = 0; i < 20; i++) {
	  let date = new Date((dottedBase += 3600 * 24 * 1000));
	  category.push(
	    [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
	  );
	  let b = Math.random() * 200;
	  let d = Math.random() * 200;
	  barData.push(b);
	  lineData.push(d + b);
	}
	// option
	option = {
	  backgroundColor: '#0f375f',
	  tooltip: {
	    trigger: 'axis',
	    axisPointer: {
	      type: 'shadow'
	    }
	  },
	  legend: {
	    data: ['line', 'bar'],
	    textStyle: {
	      color: '#ccc'
	    }
	  },
	  xAxis: {
	    data: category,
	    axisLine: {
	      lineStyle: {
	        color: '#ccc'
	      }
	    }
	  },
	  yAxis: {
	    splitLine: { show: false },
	    axisLine: {
	      lineStyle: {
	        color: '#ccc'
	      }
	    }
	  },
	  series: [
	    {
	      name: 'line',
	      type: 'line',
	      smooth: true,
	      showAllSymbol: true,
	      symbol: 'emptyCircle',
	      symbolSize: 15,
	      data: lineData
	    },
	    {
	      name: 'bar',
	      type: 'bar',
	      barWidth: 10,
	      itemStyle: {
	        borderRadius: 5,
	        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	          { offset: 0, color: '#14c8d4' },
	          { offset: 1, color: '#43eec6' }
	        ])
	      },
	      data: barData
	    },
	    {
	      name: 'line',
	      type: 'bar',
	      barGap: '-100%',
	      barWidth: 10,
	      itemStyle: {
	        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	          { offset: 0, color: 'rgba(20,200,212,0.5)' },
	          { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
	          { offset: 1, color: 'rgba(20,200,212,0)' }
	        ])
	      },
	      z: -12,
	      data: lineData
	    },
	    {
	      name: 'dotted',
	      type: 'pictorialBar',
	      symbol: 'rect',
	      itemStyle: {
	        color: '#0f375f'
	      },
	      symbolRepeat: true,
	      symbolSize: [12, 4],
	      symbolMargin: 1,
	      z: -10,
	      data: lineData
	    }
	  ]
	};
	
	option && myChart.setOption(option);
});
</script>