This series of columns is to share the application of using Echarts to draw charts, which is realized by combining actual business needs.
column content
The content shared in this series of columns will include the following:
1. How to draw a current price chart + average price chart
2. How to draw a trading volume chart
3. How to draw a time-sharing chart completely
4. How to draw a five-day chart based on a time-sharing chart Figure
5. How to draw a candlestick chart that is more in line with the user experience on the basis of the legend
6. How to combine multiple charts
7. How to solve the conflict between the horizontal scrolling of the chart and the display prompt box
8. How to realize the algorithm with characteristic functions K-line chart
9. How to make a time-sharing chart game for time-sharing training
10. How to make a K-line chart game for K-line training
renderings
time-sharing chart
five day chart
candlestick chart
K-line training game
Apache ECharts
Install
NPM install ECharts
npm install echarts --save
Use Echarts in Vue3 project
npm install echarts vue-echarts
introduce
If you really need to fully import ECharts without manually importing modules, you can add the following code:
import "echarts";
To import a single chart and component, import ECharts as the following example:
<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>