10.ECharts

ECharts

1.概念

ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上
数据可视化：将数据通过图表的形式展示出来

2.ECharts显示图表的原理

ECharts4.0之前, 底层是使用canvas标签来实现图表绘制的
ECharts4.0开始, 为了提升移动端性能, 还支持 SVG 渲染

点此进入ECharts官网

3.ECharts基本使用

1. 导入ECharts插件

//提前从官网上下载后放到项目中
 <script src="js/echarts.js"></script>

2. 为ECharts准备一个容器（不要忘记设置宽高）

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

3. 拿到准备好的容器

 let oDiv = document.querySelector("div");

4. 创建一个ECharts对象

let myCharts = echarts.init(oDiv);

5. 对ECharts进行一些配置、

let option = {
        // 设置图表的标题
        title: {
            text: 'ECharts 入门示例'
        },
        // 设置图表的图例
        legend: {
            data:['销量', '产量']
        },
        // 设置X轴上显示的数据
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {},
        // 设置图表的数据
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '产量',
            type: 'bar',
            data: [50, 120, 136, 60, 40, 80]
        }]
    };

6. 将配置传递给ECharts

 myCharts.setOption(option);

4.ECharts标题组件

title：标题组件

1. show: 是否显示
2. text: 标题文字
3. subtext: 子标题文字
4. left/top/right/bottom: 标题位置
5. borderColor: 边框颜色
6. borderWidth: 边框宽度

 title: {
            show: true,
            text: 'ECharts 入门示例',
            subtext: "学习echarts",
            // left: 50,
            // top: 50
            borderWidth: 5,
            borderColor: "red"
        }
//设置后结果如下图

5.ECharts工具箱组件

toolbox：工具箱组件

1. show: 是否显示
2. feature: 具体显示功能
   saveAsImage: 保存图片
   dataView: 数据视图
   restore: 还原
   dataZoom: 缩放视图
   magicType: 动态类型切换

在数据视图中更改数据后，更改后的数据可通过刷新显示在图表中，此时，可通过restore将数据恢复为最开始的样子

  toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                dataView: {
                    show: true
                },
                restore:{
                    show: true
                },
                dataZoom:{
                    show: true
                },
                magicType:{
                    type: ["bar", "line"]
                }
            }
        }
 //设置后结果如下图

6.ECharts弹窗组件

1. tooltip：弹窗组件

1. show: 是否显示
2. trigger:显示方式, axis X轴显示

2.数据标记

1. markLine：标记线： 最大值/最小值/平均值等
2. markPoint：标记点： 最大值/最小值/平均值等

let option = {
    //设置弹窗组件
        tooltip:{
            show: true,
            trigger: "axis"
        },
        // 设置图表的标题
        title: {
            show: true,
            text: 'ECharts 入门示例',
        },
        // 设置图表的图例
        legend: {
            data:['销量', '产量']
        },
        // 设置X轴上显示的数据
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // 设置Y轴上显示的数据, 如果没有设置会根据数据自动填充
        yAxis: {},
        // 设置图表的数据
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
             //设置标记点
            markPoint: {
                data: [
                    {type:"max", name:"最大值"},
                    {type:"min", name:"最小值"},
                ]
            },
            //设置标记线
            markLine: {
                data: [
                    {type:"max", name:"最大值"},
                    {type:"min", name:"最小值"},
                    {type:"average", name:"平均值"},
                ]
            }
        }]
    };
    //效果图如下

7.ECharts饼状图

type: ‘pie’：

1. center：设置饼状图位置
2. radius：设置饼状图半径

let options = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量','市场占比','营业额']
        },
        series: [{
           radius: "50%",
            type: 'pie',
            center:["35%","50%"],
            data: [
                {value:"12" , name:"销量"},
                { value:"50" , name:"市场占比"},
                {value:"16" , name:"营业额"},
            ]

        }]
    }
    //效果图如下

还有更多种类的效果图，可以参考官网给的API和实例进行深入学习。