ECharts 入门详解

最新推荐文章于 2024-06-08 21:17:27 发布
最新推荐文章于 2024-06-08 21:17:27 发布
阅读量1.9k 收藏 8
点赞数 1
分类专栏： # ECharts 文章标签： 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45468845/article/details/106746100
版权

目录

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
因为是使用JavaScript实现的，所以很适合在web应用方面的数据可视化，也可以应用的Android上。

ECharts配置语法

创建HTML页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

为 ECharts 准备一个具备高宽的 DOM 容器

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

设置配置信息

ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

相关属性

详细属性请点击
标题
为图表配置标题

// 图表标题
title: {
   
    x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}（x坐标，单位px）
    y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 标题边框颜色
    borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                               // 接受数组分别设定上右下左边距，同css
    itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
   
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'          // 主标题文字颜色
    },
    subtextStyle: {
   
        color: '#aaa'          // 副标题文字颜色
    }
},

提示信息

tooltip: {
   },

图例组件

// 图例
legend: {
   
   orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                              // 'horizontal' ¦ 'vertical'
   x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                              // 'center' ¦ 'left' ¦ 'right'
                              // ¦ {number}（x坐标，单位px）
   y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                              // 'top' ¦ 'bottom' ¦ 'center'
                              // ¦ {number}（y坐标，单位px）
   backgroundColor: 'rgba(0,0,0,0)',
   borderColor: '#ccc',       // 图例边框颜色
   borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
   padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                              // 接受数组分别设定上右下左边距，同css
   itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                              // 横向布局时为水平间隔，纵向布局时为纵向间隔
   itemWidth: 20,             // 图例图形宽度
   itemHeight: 14,            // 图例图形高度
   textStyle: {
   
       color: '#333'          // 图例文字颜色
   }
},

X 轴
配置要在 X 轴显示的项:
如果没有设置 type，但是设置了 axis.data，则认为 type 是 ‘category’。
如果设置了 type 是 ‘category’，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，
这会比较方便。不过注意，axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。

xAxis: {
   
    name: 'x轴',//坐标轴名称
    nameLocation= 'end',//坐标轴名称显示位置
    type: 'category',//坐标轴类型
    //data类目数据，在类目轴（type: 'category'）中有效。
    //如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。

    //如果设置了 type 是 'category'，但没有设置 axis.data，
    //则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。
    //不过注意，axis.data 指明的是 'category' 轴的取值范围。
    //如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。
    //比如说，假如 series.data 为空时，就什么也获取不到。
    data: [{
   
	    value: 'Amtcha Latte',
	    // 突出周一
	    textStyle: {
   
	        fontSize: 20,
	        color: 'red'
	    }
	}, 
	'Milk Tea', 'Cheese Cocoa']
}

在这里插入图片描述
Y 轴
配置要在 Y 轴显示的项。
注意事项同x轴，要注意data

yAxis: {
   
	// 所有类目名称列表
	data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	// 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
	data: [{
   
	    value: '周一',
	    // 突出周一
	    textStyle: {
   
	        fontSize: 20,
	        color: 'red'
	    }
	}, '周二', '周三', '周四', '周五', '周六', '周日']
}

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

series: [{
   
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

可以有多个系列

series:[
                {
   
                    type: 'bar',
                    name: '2015',
                    data: [12, 13, 14]
                },
                {
   
                    type: 'bar',
                    name: '2016',
                    data: [15, 16, 17]
                },
                {
   
                    type: 'line',
                    name: '2015',
                    data: [20, 13, 17]
                },
                {
   
                    type: 'pie',
                    name: '2015',
                    radius: '15%',
                    data: [56,89,45]
                }
            ]

在这里插入图片描述

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

type 类型
type: ‘bar’ ：柱状/条形图
type: ‘line’ ：折线/面积图
type: ‘pie’ ：饼图
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’ ：自定义系列

代码实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

折线图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="vintage.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;">
    </div>
    <script type="text/javascript">        
        var myChart = echarts.init(document.getElementById('main'), 'vintage');
        myChart.setOption({
   
            xAxis: {
   
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
   
                type: 'value'
            },
            series: [{
   
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        })
        
    </script>
</body>
</html>

更多折线图请点击

饼图

饼图主要是通过扇形的弧度表现不同类目的数据在总合中的占比
数据格式比柱状图更简单，只有以为的数值，不需要给类目。
因为不在直角坐标系中，所以也不需要xAxis，yAxis
案例：

myChart.setOption({
   
    series : [
        {
   
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            //可以添加一个设置参数将饼图显示为南丁格尔图
            //roseType: 'ange',
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                {
   value:235, name:'视频广告'},
                {
   value:274, name:'联盟广告'},
                {
   value:310, name:'邮件营销'},
                {
   value:335, name:'直接访问'},
                {
   value:400, name:'搜索引擎'}
            ]
        }
    ]
})

在这里插入图片描述
阴影配置
itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：

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)'
                }
            }
        }
    ]
};

在这里插入图片描述
更多饼图请点击这里

柱状图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src="echarts.min.js"></script>
    <script src="vintage.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;">
    </div>
    <script type="text/javascript">        
        var myChart = echarts.init(document.getElementById('main'), 'vintage');
        myChart.setOption({
   
            xAxis: {
   
                type: 'category',
                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
   
                type: 'value'
            },
            series: [{
   
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
   
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        })
        
    </script>
</body>
</html>

在这里插入图片描述
更多柱状图请点击这里

更多图形案例

ECharts样式设置

默认主题

ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。
ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。
只需要在ECharts库的时候声明主题就可以了：

var myChart = echarts.init(document.getElementById('main'),'dark');

使用官方主题编辑器

另外，我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。
在这里插入图片描述
那么如何使用官方的主题呢？
点击下载主题：
在这里插入图片描述
有两种保存方式js版本和json版本

js版本

在这里插入图片描述
可以看到有下载和复制两个选项，复制之后放在js文件中和下载是一样的。
点击下载：
在这里插入图片描述
保存之后使用很简单
在代码中引入：

<script src="vintage.js"></script>
...
var myChart = echarts.init(document.getElementById('main'),'vintage');

在这里插入图片描述

json版本

如果主题保存为 JSON 文件，那么可以自行加载和注册。
1.json文件下载成功之后，
2.读取该 JSON 文件，并使用 obj = JSON.parse(data) 将其转换成对象；
3.调用 echarts.registerTheme(‘vintage’, obj) 注册主题；
4.使用 echarts.init(dom, ‘vintage’) 创建图表，第二个参数即为刚才注册的主题名字。

使用方法不是很懂。

调色盘

调色盘可以在 option 中设置。
调色盘给定了一组颜色，图形、系列会自动从其中选择颜色。
可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
   
    // 全局调色盘。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

	//系列调色盘
    series: [{
   
        type: 'bar',
        // 此系列自己的调色盘。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
   
        type: 'pie',
        // 此系列自己的调色盘。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

直接的样式设置 itemStyle, lineStyle, areaStyle, label, …

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。

如果要自定义高亮样式可以通过 emphasis 属性来定制：

// 高亮样式。
emphasis: {
   
    itemStyle: {
   
        // 高亮时点的颜色
        color: 'red'
    },
    label: {
   
        show: true,
        // 高亮时标签的文字
        formatter: '高亮时显示的标签内容'
    }
},

在这里插入图片描述

各属性配置详解

下面的内容来自
https://juejin.im/post/5bd0426be51d457947023772

index.html文件
为一个简单的演示页面。包含了Echarts所必须的链接文件，图表的使用方法，但不包含配置方法。

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="container" style="height: 100%"></div>
<!--所需js文件-->
<script type="text/javascript" src="js/echarts-all-3.js"></script>
<script type="text/javascript" src="js/extension/dataTool.min.js"></script>
<script type="text/javascript" src="js/extension/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/map/js/china.js"></script>
<script type="text/javascript" src="js/map/js/world.js"></script>
<script type="text/javascript" src="js/api.js"></script>
<script type="text/javascript" src="js/extension/bmap.min.js"></script>
<script type="text/javascript" src="bar.js"></script>    <!--  自定义图表配置option对象，只需要学习这个  -->

<!--代码-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);               /*  使用dom初始化echarts*/
myChart.hideLoading();                           /* 加载缓冲图  */
option={
                                            /*  对应需要设置配置  */
    title:title,

};
myChart.showLoading();                          /*  去除加载缓冲图 */
myChart.setOption(option);                      /*  应用配置选项  */
if (option && typeof option === "object") {
   
    myChart.setOption(option, true);
}

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

coordinate-geo.js文件
为地理坐标系的配置参数

mytextStyle={
   
    color:"#333",                //文字颜色
    fontStyle:"normal",         //italic斜体  oblique倾斜
    fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字体系列
    fontSize:18,                 //字体大小
};
mylineStyle={
   
    color:"#333",               //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    type:"solid",               //坐标轴线线的类型，solid，dashed，dotted
    width:1,                    //坐标轴线线宽
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
myareaStyle={
   
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
myitemStyle={
   
    color:"red",                //颜色
    borderColor:"#000",        //边框颜色
    borderWidth:0,              //柱条的描边宽度，默认不描边。
    borderType:"solid",         //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
    barBorderRadius:0,          //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
    shadowBlur:10,              //图形阴影的模糊大小。
    shadowColor:"#000",         //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
};

geo=[{
   
    show:true,                                  //是否显示
    map:"china",                                //地图类型。world世界地图，china中国地图
    roam:false,                                 //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
    center:[115.97, 29.71],                     //当前视角的中心点，用经纬度表示
    aspectScale:0.75,                           //这个参数用于 scale 地图的长宽比。
    boundingCoords: [[-180, 90], [180, -90]],  //二维数组，定义定位的左上角以及右下角分别所对应的经纬度
    zoom:1,                                     //当前视角的缩放比例
    scaleLimit:{
                                   //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        min:1,                                  //最小的缩放值
        max:1,                                  //最大的缩放值
    },
    nameMap:{
                                      //自定义地区的名称映射
        'China' : '中国'
    },
    selectedMode: false ,                      //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
    label:{
                                        //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
        normal:{
   
            show:false,                          //是否在普通状态下显示标签。
            textStyle:mytextStyle,              //普通状态下的标签文本样式。
        },
        emphasis:{
   
            show:false,                         //是否在高亮状态下显示标签。
            textStyle:mytextStyle              //高亮状态下的标签文本样式。
        }
    },
    itemStyle:{
                                    //地图区域的多边形 图形样式
        normal:myitemStyle,
        emphasis:myitemStyle
    },
    zlevel:0,                                   //所属图形的 zlevel 值。
    z:2,                                        //所属图形的 z 值。
    left:"10%",                                 //组件离容器左侧的距离,百分比字符串或整型数字
    top:60,                                     //组件离容器上侧的距离，百分比字符串或整型数字
    right:"auto",                               //组件离容器右侧的距离,百分比字符串或整型数字
    bottom:"auto",                              //组件离容器下侧的距离,百分比字符串或整型数字
    layoutCenter:['30%', '30%'],                //地图中心在屏幕中的位置
    layoutSize:100,                             //地图的大小,支持相对于屏幕宽高的百分比或者绝对的像素大小。
    regions:[{
                                     //在地图中对特定的区域配置样式。
        name: '广东',
        itemStyle: {
   
            normal: {
   
                areaColor: 'red',
                color: 'red'
            }
        }
    }],
    silent:false,                               //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。

}];

coordinate-grid.js文件
为直角坐标系的配置参数

mytextStyle={
   
    color:"#333",                //文字颜色
    fontStyle:"normal",         //italic斜体  oblique倾斜
    fontWeight:"normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字体系列
    fontSize:18,                 //字体大小
};
mylineStyle={
   
    color:"#333",               //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    type:"solid",               //坐标轴线线的类型，solid，dashed，dotted
    width:1,                    //坐标轴线线宽
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
myareaStyle={
   
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
    shadowColor:"red",          //阴影颜色
    shadowOffsetX:0,            //阴影水平方向上的偏移距离。
    shadowOffsetY:0,            //阴影垂直方向上的偏移距离
    shadowBlur:10,              //图形阴影的模糊大小。
    opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};


grid=[{
   
    show:true,                       //是否显示
    zlevel:0,                        //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
    left:"10%",                      //组件离容器左侧的距离,百分比字符串或整型数字
    top:60,                          //组件离容器上侧的距离，百分比字符串或整型数字
    right:"auto",                    //组件离容器右侧的距离,百分比字符串或整型数字
    bottom:"auto",                   //组件离容器下侧的距离,百分比字符串或整型数字
    width:"auto",                    //图例宽度
    height:"auto",                   //图例高度
    containLabel: true,               //grid 区域是否包含坐标轴的刻度标签，
    backgroundColor:"transparent", //标题背景色
    borderColor:"#ccc",              //边框颜色
    borderWidth:0,                    //边框线宽
    shadowColor:"red",               //阴影颜色
    shadowOffsetX:0,                 //阴影水平方向上的偏移距离
    shadowOffsetY:0,                 //阴影垂直方向上的偏移距离
    shadowBlur:10,                    //阴影的模糊大小
    tooltip:{
                           //坐标系特定的 tooltip 设定
        show:true,                   //是否显示提示框组件，包括提示框浮层和 axisPointer
        trigger:"axis",              //触发类型 none不触发  'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。  'axis'  坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
        position: ['50%', '50%'],    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
        formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
        backgroundColor:"transparent",        //标题背景色
        borderColor:"#ccc",         //边框颜色
        borderWidth:0,               //边框线宽
        padding:5,                    //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
        textStyle:mytextStyle,      //文本样式
    },
}];
xAxis=[
    {
   
        show:true,                //是否显示 x 轴
        gridIndex:0,              //x 轴所在的 grid 的索引，默认位于第一个 grid
        position:"bottom",       //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
        offset:0,                 //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
        type:"category",         //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                                   // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
        name:'时间',               //坐标轴名称
        nameLocation:"end",       //坐标轴名称显示位置。可选：'start','middle','end'
        nameTextStyle:mytextStyle,  //坐标轴名称的文字样式
        nameGap:15,                  //坐标轴名称与轴线之间的距离
        nameRotate:0,                //坐标轴名字旋转，角度值
        inverse:false,              //是否是反向坐标轴
        boundaryGap:true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
        min:null,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
        max:null,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
        scale:false,                //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
        splitNumber:5,             //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
        minInterval:0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
        logBase:10,                 //对数轴的底数，只在对数轴中（type: 'log'）有效
        silent:false,              //坐标轴是否是静态无法交互
        triggerEvent:false,       //坐标轴的标签是否响应和触发鼠标事件
        axisLine:{
                    //坐标 轴线
            show:true,             //是否显示坐标轴轴线
            onZero:true,           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            lineStyle:mylineStyle
        },
        axisTick :{
                    //坐标轴刻度相关设置
            show:true,              //是否显示坐标轴刻度。
            alignWithLabel:false,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
            interval:auto,          //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
            inside:false,           //坐标轴刻度是否朝内，默认朝外。
            length:5,                //坐标轴刻度的长度。
            lineStyle:mylineStyle
        },
        axisLabel:{
                    //坐标轴刻度标签的相关设置
            show:true,              //是否显示
            interval:"auto",        //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
            inside:false,           //刻度标签是否朝内，默认朝外
            rotate:0,               //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
            margin:8,               //刻度标签与轴线之间的距离
            formatter: function (value, index) {
               //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                return value+"kg";
            },
            showMinLabel:null,      //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
            showMaxLabel:null,      //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
            textStyle:mytextStyle
        },
        splitLine:{
                    //坐标轴在 grid 区域中的分隔线。
            show:true,              //是否显示分隔线。默认数值轴显示，类目轴不显示。
            interval:"auto",        //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
            lineStyle:mylineStyle
        },
        splitArea:{
                    //坐标轴在 grid 区域中的分隔区域，默认不显示。
            interval:"auto",
            show:false,             //是否显示分隔区域
            areaStyle:myareaStyle
        },
        data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],             //类目数据，在类目轴（type: 'category'）中有效。
        zlevel:0,                   //X 轴所有图形的 zlevel 值。
        z:0,                        //X 轴组件的所有图形的z值
    }
];
yAxis=xAxis;                        //y轴配置内容同x轴

coordinate-parallel.js文件
为平行坐标系的配置参数

mytextStyle={
   
    color:"#333"
最低0.47元/天 解锁文章
风吹我亦散
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts图中type为graph，设置x,y图形错位
weixin_42732925的博客
04-23 1950
option = { title: { text: 'Graph 简单示例' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', symbolSize...
组态王入门详解
03-20
组态软件是工业控制应用软件的开发平台，它提供了一个良好的开发环境，如：提供了很多绘图元素、控件、报表格式、报警方式等。使 介绍了关于组态王入门详解的详细说明，提供组态王的技术资料的下载。
echarts 关系图graph
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
最新发布
前端菜鸟的自我修养
06-08 1909
​以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，echarts其实已经为提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。
ECharts：Graph图表拖拽节点
彼方_的博客
11-15 1608
问题1：节点的data如下，不使用直角坐标系一切正常，但使用直角坐标系时，节点怎么不见了？ 问题2：怎么拖拽节点？并且获得节点拖拽的偏移量呢？ 问题3：直接将坐标与偏移量进行加减，计算出来的坐标再赋值给节点，重新渲染后的节点位置与拖拽结束的位置不一样
echarts 关系图谱配置示例
haikess的博客
03-30 1971
配置项实例 option = { grid: { left: '3%', right: '40%', top: '30%', }, itemStyle: { normal: { color: ...
ECharts基础概念
CodingmanNAN的博客
09-07 864
Hello ECharts 1.引入 ECharts <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 2.绘制一个简单的图表 <!-- 为ECharts准备一个具备大小（宽高）的 Dom -->
adams入门详解与实例
01-19
ADAMS，即机械系统动力学自动分析(Automatic Dynamic Analysis of Mechanical Systems)，该软件是美国机械动力公司(Mechanical Dynamics Inc.)(现已并入美国MSC 公司)开发的虚拟样机分析软件
echarts属性详解.txt
02-23
echarts属性解释
redis入门详解PPT.ppt
06-30
Redis快速入门PPT，非常详细，非常基础。学会基础就掌握了一大半了，做的非常不错的PPT，非常值得下载。
SpringBoot+ECharts 词云案例详解
04-02
在本篇中，我们将深入探讨如何使用SpringBoot和ECharts构建一个词云案例。SpringBoot是一个流行的Java框架，用于简化Web应用的开发，而ECharts则是一个强大的JavaScript数据可视化库，能够帮助我们创建各种交互式的...
echarts图表，利用仪表盘类型变换成环形渐变图
sinat_37885331的博客
04-06 2524
使用echarts 仪表盘 调整成可以根据角度不同，对环形进行线性渐变的环形图
Echerts (第三篇 gauge 仪表盘的使用)
程序猿小白的博客
11-05 1600
1、官网实例介绍：https://www.echartsjs.com/examples/zh/editor.html?c=gauge 2、 option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, series: [ { ...
ECharts 多仪表盘（自动）
qq_61324603的博客
04-07 2714
【代码】ECharts 多仪表盘（自动）
echarts的guage仪表盘样式
程序媛的博客
03-28 953
echarts的仪表盘的样式。
HTML 中添加视频
qq_34870529的博客
11-21 1344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
echart 仪表盘gauge 参数详解
热门推荐
大小都是愁的成长之路
09-13 3万+
/*仪表盘*/ var gaugeChart = echarts.init(document.getElementById('gaugeChart')); let inputValue = parseInt(Math.random() * 100); gaugeChart.setOption({ tooltip: { ...
Echarts ----写属性设置
野蛮女孩的博客
11-04 3220
ecahrs
echarts 节点（gauge）图的使用
weixin_67339511的博客
09-29 721
【代码】echarts 节点（gauge）图的使用。
echarts折线图详解
08-25
ECharts 是百度开源的一个基于 JavaScript 的数据可视化库，可以用于创建各种类型的图表，包括折线图。下面是关于 ECharts 折线图的详解： 1. 折线图概述：折线图是一种常用的统计图表，用于显示数据随时间或其他连续变量的变化趋势。折线图由一系列连续的数据点通过线段连接而成，可以直观地展示数据的波动情况。 2. 折线图的应用场景：折线图适用于多种场景，比如股票指数走势、气温变化、销售额趋势等等。通过折线图，可以清晰地展示数据的变化规律，帮助用户做出合理的决策。 3. ECharts 中创建折线图：使用 ECharts 创建折线图非常简单。首先引入 ECharts 的库文件，然后创建一个容器元素用来放置图表，最后通过配置项和数据来定义折线图的样式和数据源。你可以在 ECharts 官网上找到详细的文档和示例代码来学习如何使用 ECharts 创作折线图。 4. 折线图的主要配置项： - xAxis：横轴配置项，用于定义横轴的类型、刻度等。 - yAxis：纵轴配置项，用于定义纵轴的类型、刻度等。 - series：系列配置项，用于定义折线图的数据和样式。 - tooltip：提示框配置项，用于显示鼠标悬停在折线上时的数据信息。 - legend：图例配置项，用于标识折线图中不同系列的含义。 5. 折线图的样式设置：ECharts 支持灵活的样式定制，可以通过配置项来调整折线图的颜色、线型、标记点形状等。你可以根据自己的需求来选择合适的样式，使折线图更加美观与易读。 总结：ECharts 提供了丰富而强大的功能，能够轻松地创建出各种类型的图表，包括折线图。通过使用 ECharts，你可以展示数据的趋势和变化规律，帮助用户更好地理解数据并作出决策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值