One, start
official website: https://echarts.apache.org/zh/index.html
configuration document: https://echarts.apache.org/zh/option.html#series-bar.stack
Terminology Quick Reference Manual: https://echarts.apache.org/zh/cheat-sheet.html
Can quickly understand the name of the component at each location, and then quickly check what parameters are supported in the document configuration item.
Two, 5 minutes to get started with ECharts
steps: 1. Import "2. Prepare the container" 3. Initialize the instance and set configuration items
<!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>Three, Vue ECharts global introduction and on-demand reference
## 安装
npm install echarts --save1. Global introduction
steps: mainjs configuration registration component" directly use this.$echarts in the component
## 在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. Introduce on demand
steps: does not need to be configured in main.js. Introduce and use echarts in components on demand
## ---------- 方法一 开始 --------------
// 引入基本模板
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 is for reference only, welcome to correct and supplement Thanks bold
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。