安装导入echarts
npm install echarts --save
引入并设置echarts容器
<template>
<!--图表内容区域,必须给 ECharts 容器本身指定高度。不然它会使用默认高度-->
<div class = "chart">
<div id = "echarts" style = "height: 17.5rem"></div>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'zrender/lib/svg/svg'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/candlestick'
import chartUtil from '../../utils/chartUtil'
export default {
name: 'quotation',
data () {
return {
chart: null,
}
},
mounted () {
//初始化 ECharts 实例,不能在created生命周期内初始化,因为那时候DOM还没有渲染,是找不到元素的
this.initChart()
},
beforeDestroy () {
//组件销毁前先销毁 ECharts 实例
if (!this.chart) { return }
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
// 基于准备好的dom,初始化echarts实例,移动端建议使用 svg模式
this.chart = echarts.init(document.getElementById('echarts'), 'light', {renderer: 'svg'})
this.chart.setOption(chartUtil.lineOption())
//图标根据窗口大小自动缩放
// window.addEventListener("resize", this.chart.resize);
},
},
}
</script>
echarts在vue中使用详细文档请见: 在 VUE 项目中使用 ECharts 画 K 线图和面积图,并且可切换
设置echarts配置项
let option = {
//grid直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴
grid: {
top: 10,
bottom: 20,
left: 25,
right: 25,
},
//xAxis直角坐标系 grid 中的 x 轴
xAxis: {
type: 'category',//类型分为类目轴:category,数值轴:value,时间轴:time,对数值:log
splitNumber: 6,//坐标轴分割段数,在类目轴无效
boundaryGap: false,//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样,设置false x轴与网格线对齐
data:['周一','周二','周三','周四','周五','周六','周一','周二','周三','周四','周五','周六'],
scale: true,
gridIndex:0,
//axisLabel:坐标轴刻度标签的相关设置。
axisLabel: {
color: '#A0A0A0',
fontSize: 10,
interval:'auto',
},
//axisLine:坐标轴轴线相关设置
axisLine: {
show:false,
lineStyle: {
color: '#A0A0A0',
},
},
//刻度线
axisTick:{
show:false
},
//网格线
splitLine: {
show:true,
lineStyle: {
color: '#EEEEEE',
},
},
},
yAxis: {
show : false,//是否显示y轴
scale: true,//只在数值轴中有效
// position: 'right',//坐标轴显示的位置
axisLabel: {
color: '#A0A0A0',
fontSize: 10,
inside: true,
},
axisLine: {
show:false,
lineStyle: {
color: '#A0A0A0',
},
},
splitLine: {
show:false,
lineStyle: {
color: '#EEEEEE',
},
},
},
series:{
type:'line',
data:[120, 132, 101, 134, 90, 230,120, 132, 101, 134, 90, 230],
smooth:true,
itemStyle:{
color:'#c8a7ff',
opacity:0.1
},
lineStyle:{
width:2,
color:'#c8a7ff'
},
},
};
export default class chartUtil {
static lineOption = (chartData) => {
return option
}
}
未设置xAxis.boundaryGap时图表显示x轴也x轴网格线未对齐
设置xAxis.boundaryGap :false时图表显示x轴与z轴线对应