Echarts 📈 ​
Echarts is a powerful charting and visualization library that is widely used in the industry. It is developed by Baidu and is open source. It is written in JavaScript and is based on the powerful zrender library. It is also based on the Apache ECharts project.
Documentation: Echarts Documentation, npm : npm
Installation ​
bash
# npm
npm install echarts
npm install vue-echarts
# yarn
yarn add echarts
yarn add vue-echartsUsage in Vue File ​
vue
import { defineComponent } from 'vue';
import IEcharts from "vue-echarts";
import * as echarts from 'echarts';
export default defineComponent({
components: {
IEcharts
},
})Usage in Component ​
vue
<template>
<IEcharts :key="$q.dark.isActive?'dark':'lite'" :theme="$q.dark.isActive?'dark':'lite'" style="height: 400px;"
:option="options" :autoresize="true"></IEcharts>
</template>
<script>
import {defineComponent} from 'vue';
import IEcharts from "vue-echarts";
import {useQuasar} from "quasar";
import * as echarts from 'echarts';
export default defineComponent({
name: "EchartsLineChart",
components: {
IEcharts
},
setup() {
const $q = useQuasar()
return {
$q
}
},
computed: {
options() {
return {
backgroundColor: 'transparent',
color: this.$q.dark.isActive ? [] : ['#836af9', '#ffbd1f', '#ffe802', '#FF0087', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: this.$q.dark.isActive ? '' : '#6a7985'
}
}
},
legend: {
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
bottom: 0
},
grid: {
left: '5%',
right: '4%',
bottom: '15%',
top: '5%'
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: '#836af9'
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: '#ffbd1f'
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
{
name: 'Line 3',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: '#ffacc4'
},
emphasis: {
focus: 'series'
},
data: [320, 132, 201, 334, 190, 130, 220]
},
{
name: 'Line 4',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 0, 135)'
},
{
offset: 1,
color: 'rgb(135, 0, 157)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 402, 231, 134, 190, 230, 120]
},
{
name: 'Line 5',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 302, 181, 234, 210, 290, 150]
}
]
}
},
}
})
</script>