Echarts learning record

You can get ECharts in several ways.

From the official website to download interface select the version you need to download, according to the needs of the developer features and volume, we offer different packages to download, if you are not asked in the volume, you can download the full version . Development environment is recommended to download the source code version , it contains common error messages and warnings.
In ECharts of GitHub download the latest release version, extract from the folder in the dist directory where you can find the latest version of echarts library.
By acquiring echarts npm, npm install echarts --save, see " Use echarts in the webpack "
cdn introduction, you can cdnjs , npmcdn or domestic bootcdn find the latest version of the ECharts

The introduction of several cases echarts

Introduced in html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2. incorporated in vue

2.1 npm install echarts --save

2.2 在main.js中引入

import echarts from 'echarts'//在vue中引入echarts
Vue.prototype.$echarts = echarts //全局引用

3. Usage

3.1 Usage in HTML

//1.定义一个具有宽高的容器
<div id="main" style="width:200px;height:200px"> </div>

<script>   
2.// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
3.// 绘制图表
myChart.setOption({
    title: {//标题
        text: 'ECharts 入门示例'
    },
    tooltip: {},//提示信息
    xAxis: {//x座标
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},//y座标
    series: [{//数据
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
</script>

3.2 In vue of

在methods生命周期里面定义一个函数

kk(){

 // 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('chart1'));
// 绘制图表
let option = {
 title:{},//标题
 xAxis: {//x座标
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},//y座标
    series: [//数据
        {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
        },
        {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
        },
        {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
        }
    ]

}
	myChart.setOption(option);
}

4. The specific parameters can refer to

https://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts

5. Some cases can refer to

https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

Echarts learning record

Guess you like