Echarts基础

ECharts的初步认识，ECharts是开源的可视化工具，主要使用了JavaScript语言以及其中的技术，因为主要的可视化展示都是将图标等可视化案例展示在网页当中，所以就使用了JavaScript的语言。其实这种技术的入门不是很难，但是有要有一点的JavaScript的基础，才能够更好地理解每一步的作用是什么，每一个配置项的都代表着什么，只要将每一个配置项的具体含义记住，不难理解。

那么我先说一下使用的过程，之后再说每一个变量的含义。

引入js文件，我们在使用echarts的时候，不能直接就使用，需要一定的插件，就是相应的js文件，要先导入他 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>，其中引号中的部分就是js文件的位置，可以是网络位置，也可以是本地的位置。
创建一个div，所有的js操作最好在div中进行，同时要设置div的id（方便js代码寻找）和大小（宽和高）。
以下是一定的固定格式，最经典的衣服和价格例子

 <div id="main" style=" 600px;height:400px;"></div>


<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

上面的代码的结果就是

根据修改之后类似的代码，设置了两个div，所以会展示出两个图表，并且修改了图例和数据的name，设置了两个数据，设置了一个折线图和饼状图，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

<div id="main" style=" 600px;height:400px;"></div>
<div id="main1" style=" 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量','数量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'pie',
data: [5, 20, 36, 10, 10, 20]
},
{name: '数量',
type: 'line',
data: [6, 16, 39, 20, 6, 24]}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart1.setOption(option);
</script>
</body>
</html>

主要总结是以下几个步骤，1.初始化echarts实例，

2.指定图表的配置项和数据，

3.使用刚指定的图表的配置项和数据来显示图表

其中每个配置项的名字都是英文的翻译，记住就好，

我自己称呼为外围的配置项，因为他们都在图表的外部

title	题目
tooltip	工具提示（不常用）
legend	图例
xAxis	X坐标轴
yAxis	Y坐标轴

内部的数据

series中， name 要和legend图例的名字一致，否则不会显示，其实可以理解为就是图例在控制着数据，type决定图的类型，比如说柱状图，折线图，饼状图等等，data就是每一列的数据，

Y坐标轴里的内容为空的时候，Y轴可以根据X轴的每一项数据来自动地匹配到合适的数值，

另外，最重要也是新手最容易忽略的一点就是legend和name要一致，最后就是将刚才设置的配置项与数据来进行展示。