Echarts的学习记录

你可以通过以下几种方式获取 ECharts。

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本

引入echarts的几种情况

在html中引入

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

2.在vue中引入

2.1 npm install echarts --save

2.2 在main.js中引入

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

3.用法

3.1在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在vue中的使用

在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.具体的参数可以参考

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

5.一些案例可以参考

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

猜你喜欢