Echarts学习笔记

最新推荐文章于 2024-05-28 11:11:34 发布

酸柠涛啊

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量176

点赞数

分类专栏： echarts 文章标签： echarts javascript css

本文链接：https://blog.csdn.net/weixin_44019875/article/details/111192764

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了ECharts的基本用法，包括legend图例、tooltip提示条、series系列（如折线图、柱状图等）的配置，以及不同类型图表的数据结构和组件说明。实例演示了如何创建一个带数据的饼图和配置南丁格尔图。

摘要由CSDN通过智能技术生成

一、基础
1.案例
legend 说明解释
tooltip 提示条
series系列（series）是指：一组数值以及他们映射成的图
系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<!-- legend 说明解释 tooltip  提示条  series系列（series）是指：一组数值以及他们映射成的图-->
    <div id="main" style="width: 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',//pie
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

在这里插入图片描述
2.不同类型的表格的数据
饼图没有x轴y轴所以是键值对的形式。

2.数组中获取数据 0列是x轴，1,2列是y轴数据，3是饼图x数据，4是饼图占比。

3.组件说明

4.css grid 图表定位

5.scatter 三点图二维数组

6.共用y轴，通过 yAxisIndex 来指定用哪个y轴
在这里插入图片描述
6.指定x轴 y轴 grid

7. 显示成南丁格尔图roseType: ‘angle’
itemStyle的emphasis是鼠标 hover 时候的高亮样式

option = {
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            roseType: 'angle',
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

在这里插入图片描述

酸柠涛啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习笔记

一、基础1.案例legend 说明解释tooltip 提示条series系列（series）是指：一组数值以及他们映射成的图系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts&l
复制链接

扫一扫

专栏目录