echarts入门实践

echarts入门实践

视频教程:B站、网易云课堂、腾讯课堂
代码地址:Gitee、Github
存储地址:
百度云-提取码:
Google云

  • 1.Echarts3.0入门课程介绍
  • 2.Echarts3.0入门之浏览器画图原理
  • 3. echarts官网展示
  • 4.Echarts常用图之简单的直方图和折线图
  • 5.Echarts常用图之标题组件
  • 6.Echarts常用图之工具箱组件
  • 7. Echarts常用图之弹窗组件
  • 8.Echarts常用图之标记线和标记点
  • 9.Echarts常用图之饼图
  • 10.Echarts常用图之仪表盘
  • 11.Echarts常用图之地图
  • 12.Echarts常用图之K线图雷达图散点图
  • 13. Echarts高级之多个坐标轴
  • 14.Echarts高级之区域缩放
  • 15.Echarts高级之值域选择
  • 16.Echarts项目之定制主题
  • 17.Echarts项目之练习第一步准备文件
  • 18.Echarts项目之获取百度接口经纬度数据
  • 19.Echarts项目之根据经纬度绘图
  • 20.Echarts项目之完善功能

Echarts3.0入门课程介绍

echarts入门实践_第1张图片

echarts入门实践_第2张图片

Echarts3.0入门之浏览器画图原理

echarts入门实践_第3张图片

canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px">
您的浏览器不支持canvas标签。
</canvas>

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");  
//开始一个新的绘制路径
ctx.beginPath();
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
var circle = {
    x : 100,    //圆心的x轴坐标值
    y : 100,    //圆心的y轴坐标值
    r : 50      //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);    
//按照指定的路径绘制弧线
ctx.stroke();

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

svg.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>svg</title>
</head>
<body>
  

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<!-- circle是圆形标签 -->
<circle cx="70" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
<!-- rect是长方形标签 -->
<rect x='120' width="100" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>


</body>
</html>

echarts入门实践_第4张图片

echarts官网展示

Echarts常用图之简单的直方图和折线图

echarts入门实践_第5张图片

直方图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bar</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    // 标题
    title: {
        text: 'ECharts 入门示例'
    },
    // 工具箱
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    // 图例
    legend: {
        data: ['销量']
    },
    // x轴
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    // 数据
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

折线图

echarts入门实践_第6张图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>line</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{

        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{

        name: '产量',
        type: 'line',
        data: [7, 30, 50, 11, 40, 80]
    }]
};

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

Echarts常用图之标题组件

echarts入门实践_第7张图片
title.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        show:true,
        text: 'ECharts 入门示例',
        subtext:'学习ECharts就来慕课网',
        left:'right', // 数字就是像素值 ,也可以是 center left right这种值
        borderColor:'red',
        borderWidth:5,
        textStyle:{
            fontSize:40
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{

        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

Echarts常用图之工具箱组件

Echarts常用图之弹窗组件

Echarts常用图之标记线和标记点

Echarts常用图之饼图

Echarts常用图之仪表盘

Echarts常用图之地图

Echarts常用图之K线图雷达图散点图

Echarts高级之多个坐标轴

Echarts高级之区域缩放

Echarts高级之值域选择

Echarts项目之定制主题

Echarts项目之练习第一步准备文件

Echarts项目之获取百度接口经纬度数据

Echarts项目之根据经纬度绘图

Echarts项目之完善功能

你可能感兴趣的:(echarts入门实践)