一 Echarts的引入
注: 仅讨论搭档已经引入过一次的情况
在相应组件<script>标签中写入即可, 不用配置其他
import * as echarts from 'echarts'
二 使用Echarts图表的步骤
1 在<div>中写入, 通过id进行绑定, 通过 :style绑定图表样式
<div id="myChart" :style="myChartStyle"/>
class属性写不写都不影响
2 在data--return中写入id的空对象,我猜测是初始化数据
<script>
export default {
data() {
return {
myChart {}, // 这里的 myChart与id相对应
// myChartStyle与 :style相对应, 100%表示撑满父元素
myChartStyle: { float: 'left', width: '100%', height: '100%'},
}
}
}
</script>
3 在mounted中挂在方法, 例如我这个echart的方法名字叫 initEcharts
mounted() {
this.initEcharts()
}
当然,如果要加入定时器等,写法会有所改变--把this.xxx放到定时器里
setTimeout( ,()=>{
this.initEcharts()
},1000)
4 在methods中写入方法:
methods: {
initEcharts() {
const option = {
// 中间可定义题目 横纵坐标 图标样式的细节 写死的数据等(在下一个标题中展开讲)
}
// 这里this取到的 myCart, 字符串'myChart', 都是和<div>中的id相对应的
// init是写入, document.getElementById是操作dom的方法,取到相应id
this.myChart = echarts.init(document.getElementById('myChart'))
// myChart同样也是id值, option与const后的option相对应
// setOption是绘制图表的意思
this.myChart.setOption(option)
// 还可以把图表画成响应式的, myChart同样是id值
window.addEventListener('resize', () => {
this.myChart.resize()
})
}
}
5 如果想模拟动态数据, 在data--return中写入, 用josn格式
// 待补充
三 const option中的配置项和数据
option = {}中的花样挺多的, 我还没有完全摸透, 先列举出几种用过的配置:
// 以下代码都是写在 const option = {}花括号里面的
title: {
text: '' // 定义标题的文字
// 文字可以设置样式
textStyle: {
color: '' // 文字颜色
fontStyle: '' // 字体风格
fontWeight: '' // 字体粗细
fontFamily: '' // 字体系列
fontSize: '' //字体大小
},
// 网格布局(在宽高响应式不生效的情况下,可以考虑grid布局,特别好用)
grid: {
top: '',
bottom: '',
left: '',
right: ''
},
// 设置横坐标轴
xAxis: {
// 坐标轴刻度下的字符
data: ["", ""] // 以数组包含字符串的形式定义
// 设置坐标轴数据显示的范围(这里的变化可以有很多,就不一一说明了)
min
max
// 设置坐标轴上某个元素的隐藏 / 显示 (如果都不写, 默认显示)
axisTick: {
show:false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
splitLine:{
show:false // 不显示网格线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
// 自适应
scale: true,
},
// 设置纵坐标轴(与横坐标类似)
yAxis: {
},
series: [
{
// 有点多, 放下一标题讲
}
]
}
当然, option这个名称的可以变的, 改为option1, option2 并不影响什么, 只要setOption后括号里的名称能对应上就行
四 series里面的配置项
series: [
{
name: '', // 数据列的名称
type: 'line', // 指定图表的类型, 这里以折线图为例
data: [1, 2, 3...], // 配置图表的数据, 注意这里不是字符串形式
smooth: true, // 直线变为平滑的曲线
// 配置单个数据项的样式
itemStyle: {
// 线条的样式
lineStyle: {
color: ''
}
},
// 标签配置
label: {
},
// 面积图中面积部分的样式
areaStyle: {
}
}
]
附链接: 更详细的配置项 ECharts 的 series 配置项主要有以下几种 - 虎虎生威啊 - 博客园 (cnblogs.com)