echarts使用

最新推荐文章于 2023-04-05 22:19:53 发布

伪成年_young

最新推荐文章于 2023-04-05 22:19:53 发布

阅读量265

点赞数 1

分类专栏： echrts知识文章标签： echarts基础知识

本文链接：https://blog.csdn.net/u012552674/article/details/101672820

版权

echrts知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

绘制简单图表

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

常用API及配置：

title:标题组件，包含主标题和副标题

title中常用属性：
- text：主标题文本，支持使用\n换行
- subtext：副标题文本
- textStyle常用属性：
  - color：主标题文字颜色
  - fontStyle、fontWeight、fontFamily、fontSize：文字设置
  - lineHeight：行高
  - subtextStyle属性： rich：在rich中，可以自定义富文本样式。利用富文本样式，可以在标签中做出丰富效果。

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

title中常用属性：
- zlevel：所有图形的zlevel值。用于Canvas分层，不同的zlevel值得图形会放在不同的Canvas中，是一种常见的优化手段。
- left、top、right、bottom：grid组件离容器边边的距离
- backgroundColor：标题背景色，默认透明。

legend：图形组件。展示不同系列的标记、颜色、名字。

legend中常用属性：
- type： plain普通图例。scroll可滚动翻页的图例。
- orient：图例列表的布局朝向。horizontal/vertical
- align：图例标记和文本的对齐。auto/left/right
- itemGap、itemWidth、itemHeight：图例标记的间隔，图形宽度，图形高度。
- formatter：用来格式化图例文本，支持字符串模板和回调函数两种形式。
- textStyle：图例的公用文本样式。
- tooltip：提示框组件。
- data：name：图例项的名称。icon：circle/rect/roundRect/triangle/diamond/pin/arrow/none

grid直角坐标系内绘图网络，单个grid内最多可以放置上下两个X轴，左右两个Y轴。可以在网络上绘制折线图、柱状图、散点图。

xAxis：直角坐标系grid中的x轴。

xAxis中常用属性：
- gridIndex：x轴所在的grid的索引。
- position：x轴的位置。top/bottom
- offset：x轴相对于默认位置的偏移，在相同的position上有多个x轴的时候使用。
- type：坐标轴类型。value数值轴，适用于连续数据。category类目轴，适用于离散的类目数据。time时间轴，适用于连续的时序数据。log对数轴，适用于对数数据。
- nameRotate：坐标轴名字旋转，角度值。
- min、max：坐标轴刻度最小、最大值。

yAxis：直角坐标系grid的y轴。与xAxios相似。

geo：地理坐标系组件。用于地图绘制。支持在地理坐标系上绘制散点图，线集。

dataset：ECharts4支持数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。

dataset中常用属性：
- id：组件ID。
- source：原始数据。
- dimensions：定义series.data或者dataset.source的每个维度的信息。

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

series中常用属性：
- type：line折线图bar柱状/条形图pie饼图scatter散点图radar雷达图map地图funnel漏斗图
- name：系列名称。
- symbol：标记的图形。circle/rect/roundRect/triangle/diamond/pin/arrow/none。设置图片：image://url。
- label：图形上的文本标签，可用于说明图形的一些数据信息。
  - normal：标签正常模式下。show/position
  - emphasis：图形的高亮样式。show/textStyle
  - formatter：标签内容格式器，支持字符串模板和回调函数两种形式。{a}系列名{b}数据名{c}数据值{@xxx}数据中名为xxx的维度的值{@[n]}数据中维度n的值

伪成年_young

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts使用

绘制简单图表<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js">&...
复制链接

扫一扫

专栏目录