echarts图表的基本应用 | Serena = 阳光果苏 = 自律给我自由

# echarts 是什么？

echarts.js 是前端 JS 插件，实现可视化数据的一款强大的专业的精品插件。具体文档可以参见：http://echarts.apache.org/zh/index.html。echarts 的本质，其实就是提供数据给他，由他来变成可视化的数据。

# 在浏览器环境下使用 echarts

下载 echarts

https://github.com/apache/incubator-echarts/tree/4.9.0/dist

1. 下载完整版
	最全最大包含所有的功能和错误提示，源代码。开发环境。
    缺点：太大
2. 下载压缩包
	将完整版进行了压缩。保留了所有的功能
3. 下载简化版
	包含了常用的图表。建议使用。
4. 定制版https://echarts.apache.org/zh/builder.html

使用

跟普通的插件一样的用法。纯 JS 插件，不需要依赖任何库。具体需要看官网。https://echarts.apache.org/zh/option.html
使用 JSON 数据来渲染 - 结合 ajax

JSON 数据是适配 echarts，还是 echarts 来适配 json 数据？知道规划数据格式，如果后端不熟悉 echarts，需要告知后端。

# 在 vue 豪华版（Nodejs）中使用

语法同浏览器版本。仅有使用方式不一样。

步骤：

安装
1
npm install echarts --save

在 main.js 中导入并启用

// 导入echarts并启用
// 类似于导入axios
import echarts from 'echarts'
Vuee.use(echarts);
// 挂载到vue的实例中，就可以到处使用了
Vuee.prototype.echarts=echarts;
//使用方式同axios
this.echarts

如果是通过 axios 加载 json 后再使用，就将 echarts 代码放在 axios 的 then 的回调函数中，也就是成功后再渲染图表
1
2
3
4
this.$axios.get('json/data.json').then(res=>{
//这里写echarts的代码
//写法同浏览器语法
});

# echarts 使用实例

# 实例 1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入echarts.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.js"></script>
</head>
<body>
    
    <!--使用它  -->
    <!-- 准备一个元素用来存放生成的可视化内容 -->
    <div class="echarts"  style="width: 500px; height: 300px">
        
    </div>

    <!-- 配置JS，调用 -->
    <script>
        //
        var ec=document.querySelector(".echarts");
        // 使用echarts的方法，配置
        // 启用插件,初始画要渲染的DOM元素
        // el:"#app"
        var myChart = echarts.init(ec);
        // 具体的配置项，其实是一个对象
        // 核心。
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
           tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

# 实例 2


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入echarts.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.js"></script>
</head>
<body>
    
    <!--使用它  -->
    <!-- 准备一个元素用来存放生成的可视化内容 -->
    <div class="echarts"  style="width: 500px; height: 300px">
        
    </div>

    <!-- 配置JS，调用 -->
    <script>
        //
        var ec=document.querySelector(".echarts");
        // 使用echarts的方法，配置
        // 启用插件,初始画要渲染的DOM元素
        // el:"#app"
        var myChart = echarts.init(ec);
        // 具体的配置项，其实是一个对象
        // 核心。
        var option = {
            // 标题
            // title: {
            //     text: 'ECharts 入门示例'
            // },
            // 鼠标悬浮上去的提示设置
            tooltip: {
                trigger:'axis'
            },
            // 副标题，建议与下面的data和series对应
            legend: {
                // align:"right",
                right:'10%',
                data:['销量','评价',"价格"]
            },
            // x轴的刻度
            xAxis: {
                data: ["衬衫","羊毛衫",{value:"雪纺衫",textStyle: {
                            fontSize: 20,
                            color: 'red'
                        }},"裤子","高跟鞋","袜子"]
            },
            // y轴的刻度，一般不填，会自动填写
            yAxis: {
                // show:false
                max:100
            },
            // 加数据，添加维度,一个对象代表就是一个维度
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '评价',
                type: 'line',
                data: [15, 25, 26, 12, 11, 10]
            },
            {
                name: '价格',
                type: 'line',
                data: [65, 25, 24, 22, 14, 12]
            }
            ],
            color:['red','green','blue']
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

# echarts 结合 ajax 使用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入echarts.js -->
    <script src="js/echarts.js"></script>

    <!-- JQ，目的为了使用ajax -->
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    
    <!--使用它  -->
    <!-- 准备一个元素用来存放生成的可视化内容 -->
    <div class="echarts"  style="width: 500px; height: 300px">
        
    </div>

    <!-- 配置JS，调用 -->
    <script>

        $.ajax({
            url:"json/cloths.json",
            success:sFun
        })

        // 获取数据成功后会执行的函数
        function sFun(res){
            console.log(res)
        
        //
        var ec=document.querySelector(".echarts");
        // 使用echarts的方法，配置
        // 启用插件,初始画要渲染的DOM元素
        // el:"#app"
        var myChart = echarts.init(ec);
        // 具体的配置项，其实是一个对象
        // 核心。
        var option = {
            // 标题
            // title: {
            //     text: 'ECharts 入门示例'
            // },
            // 鼠标悬浮上去的提示设置
            tooltip: {
                trigger:'axis'
            },
            // 副标题，建议与下面的data和series对应
            legend: {
                // align:"right",
                right:'10%',
                data:res.tit
            },
            // x轴的刻度
            xAxis: {
                data: res.xAxis
            },
            // y轴的刻度，一般不填，会自动填写
            yAxis: {
                // show:false
                max:100
            },
            // 加数据，添加维度,一个对象代表就是一个维度
            series: [
           
            {
                name: '销量',
                type: 'bar',
                data: res.data[0],
                stack: "销量"
            },
            {
                name: '评价',
                type: 'bar',
                data: res.data[1],
                stack: "销量"
            },
            {
                name: '价格',
                type: 'bar',
                data: res.data[2],
                stack: "销量"
            }
            ],
            color:['red','green','blue']
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
    </script>
</body>
</html>

echarts