引入 echarts
无 webpack/parcel 的情况下，可以通过 src 来引入 echarts。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
通过全局变量window.echarts可以调用 echarts。
console.log(echarts)
也可以直接安装 echarts，并通过import引入 echarts。
还推荐安装 @types/echarts，用于在 webstorm 中显示 echarts 代码提示。
yarn add echarts
yarn add --dev @types/echarts
import * as echarts from 'echarts'
echarts 实例
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
echarts 外观
根据echarts.init()可以更换图表外观。
const myChart = echarts.init(document.getElementById('main'), 'dark')
可以参考术语速查手册和配置项手册，设置option参数，可以对图表外观进行修改。
const option = {
title: {
text: '主标题文本',
textStyle: {
color: '#F00'
},
subtext: '副标题文本',
right: 0
}
}
echarts 数据
可在xAxis/yAxis中分别设置横坐标和纵坐标名称data。
const option = {
xAxis: {
data: ['1号', '2号', '3号', '4号', '5号']
},
}
可在series中设置图表数据data和图表类型type。
const option = {
series: [
{
type: 'bar',
data: [10, 10, 36, 20, 5]
}
]
}
echarts 图表默认只会在初始化时渲染一次，故无法通过直接修改option.series.data来修改图表。
我们可以通过setOption()更改图表样式以及图表数据。
myChart.setOption({
xAxis: {
data: [...option.xAxis.data, '6号']
},
series: [
{
data: [...option.series[0].data, 1]
}
]
})
需要注意的是，series是一个数组，读取 X 坐标是option.xAxis.data，但读取数据是option.series[0].data。
我们可以通过showLoading()和hideloading()为图表添加 loading 加载动画。
myChart.showLoading()
myChart.setOption({
series: [
{
data: newData
}
]
})
myChart.hideLoading()
为了防止用户快速重复点击加载，我们可以添加一个布尔变量记录 loading 的状态。
let isLoading = false
const updateData = ()=>{
if (isLoading) {return}
myChart.setOption({
series: [
{
data: newData
}
]
})
isLoading = false
}
echarts 移动端
如何使 echarts 配适移动端？
更改 meta:view port。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
用 JS 获取屏幕宽度，并设置在<div>上。width/height的设置应该在echarts实例初始化之前。
<body>
<div id="main"></div>
</body>
const width = document.documentElement.clientWidth
main.style.width = `${width}px`
main.style.height = `${width * 1.2}px`
media 选项
echarts 提供了内置的 media 选项从而保证了移动端自适应。
option = {
// 这里是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...,
media: [ // 这里定义了 media query 的逐条规则。
{
query: {...}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
legend: {...},
...
}
}
]
};
当满足对应的query时，会按照对应的option渲染图表。
query支持三个属性width、height、aspectRatio，每个属性可以加上min或max类似如下。
两个属性同时出现表示“并且”，{minWith: 200, maxWidth: 300}表示“宽度大于200，并且小于300”。
每个query类似如下：
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
Vue + echarts
在 Vue 中使用 echarts 需要通过ref attribute 来得到<div>容器。
<template>
<div style="width: 600px;height:400px;" ref="container"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
option: {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
}
}
},
mounted() {
this.chart = echarts.init(this.$refs.container, 'dark')
this.chart.setOption(this.option)
},
watch: {
option() {
this.chart.setOption(this.option)
}
}
}
</script>
