插件安装
yarn add vue-echarts echarts
在vue2环境下使用还需要安装:
yarn add @vue/composition-api
在项目main.js按需引入echarts
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
import {
CanvasRenderer
} from 'echarts/renderers'
import {
LineChart,
LinesChart,
HeatmapChart
} from 'echarts/charts'
import {
GridComponent,
TooltipComponent,
LegendComponent,
VisualMapComponent,
MarkLineComponent,
DataZoomComponent
} from 'echarts/components'
use([
CanvasRenderer,
LineChart,
LinesChart,
HeatmapChart,
GridComponent,
TooltipComponent,
LegendComponent,
VisualMapComponent,
MarkLineComponent,
DataZoomComponent
]);
Vue.component('v-chart', ECharts)
页面里使用
多条折线图option的配置
option: {
title: { // 标题配置
text: '',
show: false
},
tooltip: { // 提示框配置
trigger: 'axis',
},
legend: { // 图例配置
data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH','ZCASH', 'EOS', 'XLM', 'XMR'],
selectedMode: false,
textStyle: {
color: '#fff',
fontSize: 12,
width: 40,
},
bottom: 0,
icon: 'rect',
itemWidth: 14,
itemHeight: 2,
itemGap: 20,
align: 'left',
},
grid: { // 网格配置
left: '3%',
right: '3%',
bottom: '15%',
top: '4%',
containLabel: true,
// show: true,
borderColor: 'rgb(44, 44, 44)'
},
toolbox: { // 工具栏配置
show: false
},
xAxis: { // x轴配置
type: 'category',
boundaryGap: false,
data: [0, ...dateStep('2021/02/21', '2021/06/30', 7)],
axisLine: {
onZero: false,
lineStyle: {
color: 'rgb(170, 170, 170, .2)',
}
},
axisLabel: {
rotate: 45,
inside: false,
textStyle: {
color: 'rgb(255, 255, 255)'
},
formatter(val) {
return val == 0?'':val;
}
},
axisTick: {
lineStyle: {
color: 'rgb(170, 170, 170)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgb(170, 170, 170, .2)'
}
}
},
yAxis: { // y轴配置
type: 'value',
boundaryGap: false,
max: 90,
min: -10,
axisLine: {
lineStyle: {
color: 'rgb(170, 170, 170, .2)',
}
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgb(255, 255, 255)'
},
formatter(val) {
return val.toFixed(2)+'%'
}
},
axisTick: {
lineStyle: {
color: 'rgb(170, 170, 170)'
}
},
splitLine: {
show: true,
interval: 10,
lineStyle: {
color: 'rgb(170, 170, 170, .2)'
}
},
splitNumber: 10,
},
series: [{
type: 'line', // 折线图配置
data: []
}]
},
热力图配置(heatmap)
option3: {
tooltip: { // 工具条
position: 'top'
},
grid: { // 网格
top: '15%'
},
xAxis: { // x轴
type: 'category',
data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH', 'ZCASH', 'EOS', 'XLM', 'XMR'],
position: 'top',
splitArea: {
show: true
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgb(255, 255, 255)'
},
},
},
yAxis: { // y轴
type: 'category',
data: ['BTC', 'AMPL', 'ETH', 'XRP', 'LTC', 'BCH', 'ZCASH', 'EOS', 'XLM', 'XMR'],
splitArea: {
show: true
},
axisLabel: {
inside: false,
textStyle: {
color: 'rgb(255, 255, 255)'
},
},
},
visualMap: [{ // 视觉(颜色变换)
min: 0,
max: 10,
show: false,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
inRange: {
color: ['rgb(140, 71, 71)', 'rgb(70, 132, 55)'],
symbolSize: [30, 100]
}
}],
series: [{ // 热力图配置
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 0, 0.5)'
}
}
}]
}