vue3版本 | vue2版本
npm i vue-echarts-block
import vueEchartsBlock from 'vue-echarts-block';
Vue.use(vueEchartsBlock);
- 安装依赖
npm install echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
id
:图表ID-->任意类型;必传cname
:自定义class-->String;非必传option
:图表配置数据-->Object;必传series-click
:曲线上点击事件-->Function;非必传
option: {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
}