引入:
本项目搭建完成之后,根据官网的提示,在webpack中使用echarts,通过npm安装echarts:npm install echarts --save
使用:
echarts可以作为一个正常的vue组件使用:
<template>
<div class="echarts">
<div id="main" class="echarts-canvas"></div>
</div>
</template>
- echarts实例挂载:
chart = echarts.init(document.getElementById('main'))
- 设置参数:
chart.setOption({
// 提示框组件
tooltip: {
},
// 标题组件,包含主标题和副标题。
title: {
text: text, // 主标题文本,
top: '2%' // 离容器上侧的距离。为负数时超出隐藏
},
// 直角坐标系 grid 中的 x 轴,
xAxis: {
data: ['徒步', '跑步', '骑行', '自驾', '公交', '出租'] // 所有类目名称列表
},
// 直角坐标