本系列专栏是分享使用 Echarts 来绘制图表的应用，它结合了实际的业务需求来实现的。
专栏内容
这一系列专栏分享内容将包含以下：
1.如何绘制现价图+均价图
2.如何绘制成交量图
3.如何完全绘制出分时图
4.如何在分时图的基础上绘制出五日图
5.如何在图例的基础上绘制出更符合用户体验的K线图
6.如何进行多图表的结合
7.如何解决图表的横向滚动和展示提示框的冲突
8.如何实现具有特色功能算法的K线图
9.如何制作分时训练的分时图游戏
10.如何制作K线训练的K线图游戏
效果图
分时图
五日图
K线图
K线训练游戏
Apache ECharts
安装
NPM 安装 ECharts
npm install echarts --save
在Vue3项目中使用Echarts
npm install echarts vue-echarts
引入
如果你实在需要全量引入 ECharts 从而无需手动引入模块，可添加如下代码：
import "echarts";
引入单个图表和组件，则如下面示例引入ECharts ：
<template>
<v-chart class="chart" :option="option" />
</template>
<script>
import {
use } from 'echarts/core';
import {
CanvasRenderer } from 'echarts/renderers';
import {
PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import VChart, {
THEME_KEY } from 'vue-echarts';
import {
ref, defineComponent } from 'vue';
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
export default defineComponent({
name: 'HelloWorld',
components: {
VChart,
},
provide: {
[THEME_KEY]: 'dark',
},
setup() {
const option = ref({
title: {
text: 'Traffic Sources',
left: 'center',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
},
series: [
{
name: 'Traffic Sources',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{
value: 335, name: 'Direct' },
{
value: 310, name: 'Email' },
{
value: 234, name: 'Ad Networks' },
{
value: 135, name: 'Video Ads' },
{
value: 1548, name: 'Search Engines' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
});
return {
option };
},
});
</script>
<style scoped>
.chart {
height: 100vh;
}
</style>