共计 2298 个字符，预计需要花费 6 分钟才能阅读完成。
一、开始
官网： https://echarts.apache.org/zh…
配置文档：https://echarts.apache.org/zh…
术语速查手册：https://echarts.apache.org/zh…
能疾速理解每个地位的组件的名字，而后在文档配置项里疾速查看反对什么参数。
二、5 分钟上手 ECharts
步骤： 1、引入》2、筹备容器》3、初始化实例并设定配置项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 筹备一个具备大小（宽高）的 Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于筹备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {...}; // 各种配置
// 应用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>三、Vue ECharts 全局引入与按需援用
## 装置
npm install echarts --save1、全局引入
步骤： mainjs 中配置注册组件》组件中间接应用 this.$echarts
## 在 main.js 中配置
import echarts from 'echarts' // 引入 echarts
Vue.prototype.$echarts = echarts // 注册组件 ## 应用
<div id="myChart" :style="{width:'300px', height:'300px'}"></div>
<script>
export default {
name: 'eCharts',
data () {
return {msg: 'Welcome to Your Vue.js App'}
},
mounted(){this.drawLine();
},
methods: {drawLine(){
// 基于筹备好的 dom，初始化 echarts 实例
var myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({}); // 各种配置
}
}
}
</script>2、按需引入
步骤： 不须要在 main.js 中配置。在组件里按需引入应用 echarts
## ---------- 办法一 开始 --------------
// 引入根本模板
let echarts = require('echarts')
// 引入所须要用到的柱状图组件 (选引)
require('echarts/lib/chart/bar')
// 引入其余所须要用到的根底组件 提示框和 title 组件等 (选引) 依据术语速查手册
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
## ---------- 办法一 开始 --------------
## ---------- 形式二 开始 --------------
// 引入 echarts 外围模块，外围模块提供了 echarts 应用必须要的接口。import * as echarts from 'echarts/core';
// 引入所需图标 柱状图图表，图表后缀都为 Chart
import {BarChart} from 'echarts/charts';
// 引入提示框，题目，直角坐标系组件，组件后缀都为 Component，依据术语速查手册
import {TooltipComponent, GridComponent} from 'echarts/components';
// 引入 Canvas 渲染器，留神引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';
// 注册必须的组件
echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
## ---------- 形式二 完结 --------------
## 应用
export default {
name: 'eCharts',
mounted(){this.drawLine();
},
methods: {drawLine(){
// 基于筹备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({title: { text: '在 Vue 中应用 echarts'},
tooltip: {},
xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
mark 一下 仅供参考 欢送更正补充 Thanks 粗体
正文完
