echarts基础配置项

基础配置属性

简要:笔记基于echarts v4,官网:https://echarts.apache.org/v4/zh/option.html

该笔记记录常用配置,具体配置请参照官网。

title :标题组件

标题组件,包含主标题和副标题。

  • show:是否显示主键,默认true

  • text:文本标题,支持\n

  • link:超链接

  • textStyle:标题样式

    • color:设置颜色

    • fontSize:设置字体

    • fontStyle:normal(标准) bold(黑体) bolder(粗体)lighter(更细)

  • subtext:副标题

  • sublink:副标题超链接

  • subtextStyle:副标题样式,可参照textStyle

  • itemGap:主副标题的距离,默认是10

  • left 、top 、right 、bottom :auto

  • borderColor:边框颜色

  • borderRadius:圆角

  • backgroundColor:标题背景

legend:图例组件

图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

xAxis:直角坐标系 grid 中的 x 轴

直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

  • id :主键ID

  • show:是否显示,默认 true

  • gridIndex:x 轴所在的 grid 的索引,默认位于第一个 grid。

  • position:x轴的位置,可选值:'top','bottom'

    grid中第一个默认'bootom',第二个默认是另一侧。

  • offset:X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用

    例如 offset:0

series:系列列表

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的echarts基础代码: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>echarts基础示例</title> <meta charset="utf-8"> <!-- 引入echarts库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 创建一个容器来承载echarts图表 --> <div id="chart" style="width: 600px; height:400px;"></div> <!-- 创建一个按钮,用于触发图表更新 --> <button onclick="updateChart()">更新图表</button> <script> // 获取容器元素 var chartContainer = document.getElementById('chart'); // 初始化echarts实例 var myChart = echarts.init(chartContainer); // 定义图表配置 var option = { title: { text: '销售统计图表' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置和数据显示图表。 myChart.setOption(option); // 定义更新图表的函数 function updateChart() { // 修改数据 option.series[0].data = [15, 10, 26, 20, 30, 10]; // 更新图表 myChart.setOption(option); } </script> </body> </html> ``` 该示例展示了如何创建一个简单的柱状图,并提供了一个按钮,用于更新图表的数据。在代码中,首先引入了echarts库,然后创建了一个容器来承载图表,接着定义了图表的配置,包括了图表的标题、提示框、图例、x轴和y轴等信息,并使用`myChart.setOption(option)`方法将配置应用到图表中。最后,定义了一个`updateChart()`函数,用于更新图表的数据。当按钮被点击时,`updateChart()`函数会被调用,将图表数据修改后调用`myChart.setOption(option)`方法更新图表。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卑微小钟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值