Echars图表

Echars图表主要是以图表形式展示数据，功能强大，上手简单。使用JS开发的。开源的。兼容性强。特性有丰富的可视化类型：折线图，散点图，饼图，k线图…多种数据格式无需转化直接使用千万数据集合移动端优化（可以通过手指实现缩放）采用多种方式进行渲染（canvas,SVG,…）动态数据绚丽特效使用独立版本使用CDN版本（网络差的时候，效果不会显示）NPM方法(npm install echarts --

不可爱仙女

143人浏览 · 2021-03-10 15:09:41

不可爱仙女 · 2021-03-10 15:09:41 发布

Echars图表

主要是以图表形式展示数据，功能强大，上手简单。
使用JS开发的。
开源的。
兼容性强。

特性

有丰富的可视化类型：折线图，散点图，饼图，k线图…
多种数据格式无需转化直接使用
千万数据集合
移动端优化（可以通过手指实现缩放）
采用多种方式进行渲染（canvas,SVG,…）
动态数据
绚丽特效

使用

独立版本
使用CDN版本（网络差的时候，效果不会显示）
NPM方法(npm install echarts --save)(引用require（“echarts"）)

eg:
效果如图显示
在这里插入图片描述
代码如下显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 为Echarts准备一个具备宽高的dom -->
    <div id="main" style="width: 600px; height: 400px;"></div>
    <!-- 引入Echarts -->
    <script src="./echarts.min.js"></script>
    <script>
        // 基于准备好的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,10,20,15,20,5]
            }]
        };
        //使用刚刚指定的配置项和数据显示图表
        myChart.setOption(option)
    </script>
</body>
</html>

配置语法

1.创建页面，引入echarts文件

<!-- 引入Echarts -->
<script src="./echarts.min.js"></script>

2.为Echarts准备一个固定宽高的DOM容器

<!-- 为Echarts准备一个具备宽高的dom -->
    <div id="main" style="width: 600px; height: 400px;"></div>

3.设置配置信息—Echarts库/json格式来配置

var mycharts = echarts.init(document.getElementById(‘main’)).setOption(option);

这里 option 表示使用 json 数据格式的配置来绘制图表

(1)标题：为图表配置标题

title: {
text: '第一个 ECharts 实例’第 5 页共 7 页
}

(2)提示信息：

tooltip: {},

(3)图例组件：

展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
在这里插入图片描述

(4)X 轴：

xAxis: {
data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]
}

(5)Y 轴：

yAxis: {}

(6)系列列表：每个系列通过 type 决定自己的图表类型:

在这里插入图片描述

 每个系列通过 type 决定自己的图表类型：
 type: ‘bar’：柱状/条形图
 type: ‘line’：折线/面积图
 type: ‘pie’：饼图第 6 页共 7 页
 type: ‘scatter’：散点（气泡）图
 type: ‘effectScatter’：带有涟漪特效动画的散点（气泡）
 type: ‘radar’：雷达图
 type: ‘tree’：树型图
 type: ‘treemap’：树型图
 type: ‘sunburst’：旭日图
 type: ‘boxplot’：箱形图
 type: ‘candlestick’：K 线图
 type: ‘heatmap’：热力图
 type: ‘map’：地图
 type: ‘parallel’：平行坐标系的系列
 type: ‘lines’：线图
 type: ‘graph’：关系图
 type: ‘sankey’：桑基图
 type: ‘funnel’：漏斗图
 type: ‘gauge’：仪表盘
 type: ‘pictorialBar’：象形柱图
 type: ‘themeRiver’：主题河流
 type: ‘custom’：自定义系列