你们要的Echart系列，今天它来了，教你一招快速上手echarts的属性设置，手把手教程系列

一、echarts简介

以前的百度echart（echarts.baidu.com），不过现在的ECharts 正在 Apache 开源基金会孵化中，因此域名（echarts.baidu.com）已不再使用，请访问 echarts.apache.org。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

现在废话不多说，官网地址：https://echarts.apache.org/

二、echarts的下载、安装与使用

点击上面的网址就来到了echarts的官网了，最新版的Apache Echarts 是5.x的版本了。
官网大概就长下面的这个样子。

然后点击快速入门，我们先去把echarts安装一下，按下图所示进行操作。

作者的demo环境是用的vue-cli3的脚手架，将Echarts安装到项目里

运行命令：

npm install echarts --save
//or
yarn add echarts

安装整个包到项目里

在项目里使用，先写个测试用例，看看是否安装成功了。

<template>
    <div id="charts-container" />
</template>
<script>
// 引入基本模板
import * as echarts from "echarts";
export default {
    name: "LineCharts",
    props: {
        options: {
            required: false,
            type: [Object],
            default: () => {},
        },
    },
    data() {
        return {

        };
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * 初始化charts
         */
        init() {

             // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('charts-container'));
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }]
            };
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" scoped>
#charts-container {
    width: 100%;
    height: 410px;
}
</style>

我们使用了一个官网示例的代码，是最简单版本的Echart原型。