echarst入门第三天

最新推荐文章于 2024-02-10 02:29:17 发布

weixin_51529199

最新推荐文章于 2024-02-10 02:29:17 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/weixin_51529199/article/details/113656860

版权

<!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: 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>

还是从这个老图开始,引入echarst在第一天
在这里插入图片描述
以下是title所有的属性我会附带效果图想要练习的话可以去这里,这个是echarst的自带的
第二行是他的资源库,可以自行挑选类似的进行修改

https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started
https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all

1.title. idstring
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
ps:一般情况下完全不需要这东西
2.title. show = true
是否显示标题组件,默认为true也就是显示,boolean"
在这里插入图片描述
3.title. text
主标题文本，支持使用 \n 换行。

4.title. link
主标题文本超链接。现在标签属于可点击状态

5.title. target
指定窗口打开主标题超链接。
‘self’ 当前窗口打开
‘blank’ 新窗口打开

6.title. subtext
副标题文本，支持使用 \n 换行。
7.title. sublink
副标题文本超链接。
8.title. subtarget
‘self’ 当前窗口打开
‘blank’ 新窗口打开
ps:类似上面的标题只不过是副标题
在这里插入图片描述
9.title. textAlign
整体（包括 text 和 subtext）的水平对齐。
可选值：‘auto’、‘left’、‘right’、‘center’。
10.title. textVerticalAlign
整体（包括 text 和 subtext）的垂直对齐。
可选值：‘auto’、‘top’、‘bottom’、‘middle’。
11.title. padding
标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
在这里插入图片描述
12.title. itemGap
主副标题之间的间距。.
13.title. zlevelnumber
所有图形的 zlevel 值。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
14.title. z
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。
15.title. left
title 组件离容器左侧的距离
left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。
如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
title. top
title. right
title. bottom
ps:这三个类似
16.title. backgroundColor
标题背景色，默认透明。
颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’
在这里插入图片描述

17title. borderColor
标题的边框颜色。支持的颜色格式同 backgroundColor。
18title. borderWidth
标题的边框线宽。
在这里插入图片描述

19.title. borderRadius
圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。
在这里插入图片描述
20.title. shadowColor
阴影颜色。支持的格式同color。
注意：此配置项生效的前提是，设置了 show: true。
21.title. shadowBlur
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。
在这里插入图片描述

22.title. shadowOffsetX
阴影水平方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。
在这里插入图片描述

23.title. shadowOffsetY
阴影垂直方向上的偏移距离。
注意：此配置项生效的前提是，设置了 show: true。
在这里插入图片描述
24.title. textStyle文本样式
title.textStyle. color
主标题文字的颜色。

title.textStyle. fontStyle
主标题文字字体的风格。
‘normal’
‘italic’
‘oblique’
title.textStyle. fontWeight
主标题文字字体的粗细。
‘normal’
‘bold’
‘bolder’
‘lighter’
100 | 200 | 300 | 400…
title.textStyle. fontFamily
主标题文字的字体系列。
title.textStyle. fontSize
主标题文字的字体大小。
title.textStyle. lineHeight
行高。
title.textStyle. width
文本显示宽度。
title.textStyle. heigh
文本显示高度。
title.textStyle. textBorderColor
文字本身的描边颜色。
title.textStyle. textBorderWidth
文字本身的描边宽度。
title.textStyle. textShadowColor
文字本身的阴影颜色。
title.textStyle. textShadowBlur
文字本身的阴影长度。
title.textStyle. textShadowOffsetX
文字本身的阴影 X 偏移。
title.textStyle. textShadowOffsetY
文字本身的阴影 Y 偏移。
title.textStyle. overflow
文字超出宽度是否截断或者换行。配置width时有效
‘truncate’ 截断，并在末尾显示ellipsis配置的文本，默认为…
‘break’ 换行
‘breakAll’ 换行，跟’break’不同的是，在英语等拉丁文中，'breakAll’还会强制单词内换行
title.textStyle. ellipsis
在overflow配置为’truncate’的时候，可以通过该属性配置末尾显示的文本。
title.textStyle. lineOverflow
文本超出高度部分是否截断，配置height时有效。
‘truncate’ 在文本行数超出高度部分截断。

weixin_51529199

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarst入门第三天

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script></head><body> <!-- 为ECharts准
复制链接

扫一扫