Echarts基本学习 柱状图折线图通用配置

最新推荐文章于 2024-05-21 20:58:30 发布
最新推荐文章于 2024-05-21 20:58:30 发布
阅读量1.3k 收藏 15
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/117405414
版权

1echarts的基本步骤

四步
1 找dom容器
2 初始化Init
3 配置options
4 setOptions
在这里插入图片描述
几乎124的步骤是一样的，options是配置项，想呈现什么图标就配什么。在这里插入图片描述
最基本的带最大值最小值的柱状图
在这里插入图片描述

2 平均值 markLine属性

在这里插入图片描述
在这里插入图片描述

3 数值显示 柱宽度， 横向柱状图

数值显示 label属性
在这里插入图片描述
在这里插入图片描述
柱宽度 barWidth
在这里插入图片描述

在这里插入图片描述
横向的话只需要注意两个轴的转变就行
在这里插入图片描述
在这里插入图片描述

通用配置 即饼图散点图通用的配置

title 标题
tooltip: 提示
toolbox 工具按钮
legend 图例
在这里插入图片描述
在这里插入图片描述
tooltip 提示框组件， 鼠标滑过图表的时候提示
在这里插入图片描述
在这里插入图片描述
formatter也可以设置函数
在这里插入图片描述

在这里插入图片描述

toolbox

可以导出图片，数据视图， 动态类型切换，数据区域缩放， 重置等五个工具等功能
在这里插入图片描述
在这里插入图片描述

legend 图例，用于筛选系列 需要与series配合使用

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
四个通用配置基本使用就是这样
title 标题 tooltip提示框 工具按钮toolbox 图例:legend

折线图

在这里插入图片描述
在这里插入图片描述
基本绘制

大小值平均值， 标注区间

大小值平均值跟柱状图一摸一样
在这里插入图片描述
在这里插入图片描述

标注区间 markArea

在这里插入图片描述
在这里插入图片描述

线条控制 平滑 smooth在这里插入图片描述

在这里插入图片描述

填充风格

在这里插入图片描述
在这里插入图片描述

紧挨边缘

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

y轴范围

scale在这里插入图片描述
在这里插入图片描述

堆叠图 serise每个设置stack: ‘all’

正常
在这里插入图片描述
会重叠，可以设置在这里插入图片描述
每个series都加
在这里插入图片描述
就会变成这样，不会重叠但是要注意y轴的变化，上面那条线起点是1000，他只是往上添加了1000。
在这里插入图片描述
再加上areaStyle
在这里插入图片描述
堆叠的效果就更加明显。

coderlin_
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
Echarts柱状图基本配置
柒月小姐姐
01-26 1005
barOption = { xAxis: { // x轴 type: “category”, // 坐标轴刻度标签的相关配置 axisLabel: { show: true, color: “#c23531”, // 标签的字体颜色 interval: 0, // 坐标轴刻度标签的显示间隔,默认会采用标签不重叠的策略间隔显示标签.设置成0强制显示所有标签，1表示隔一个标签显示一个标签，以此类推 rotate: 40, // 坐标轴刻度标签（逆时针）旋转40度显示，旋转的角度从 -90 度到 90 度。 fo
echarts柱状图的基础配置详解
weixin_52063449的博客
04-15 1792
option = { title: { text: '柱状图', subtext: '副标题' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, grid: { left: '3%', right: '4%', bottom: '3%...
echarts 柱状图＋折线图
bidepanm的博客
09-27 4986
const barLineSymbolImg = [require(’…/…/…/…/…/images/components/app/xxx/icon-1.png’), require(’…/…/…/…/…/images/components/app/xxx/icon-2.png’)]; // 导出模块 export default { props: { // 需要传递的数据 data: { type: Array, default() { return [ { name: ‘北京北京北京北京北京北京北京’
echarts 折线图 + 柱状图
热门推荐
aibujin的博客
05-16 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts-折线图与柱状图，图形的标记，堆叠
最新发布
m0_74019046的博客
05-21 1067
如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
echarts——柱状图+折线图
月来better
07-18 1692
echarts——柱状图+折线图
Echarts柱状折线图
不见长安见晨雾
07-05 832
<html> <head> <style> #EcharBox { margin: 0 auto; width: 95%; height: 400px; } </style> </head> <body> <div id="EcharBox"></div> </body> <s
数据可视化，使用Echarts生成柱状图，折线图，饼图
weixin_51382988的博客
02-03 5171
echarts的基本使用，用echarts实现柱状图，折线图，饼图
【JavaScript源代码】Echarts基本入门之柱状图、折线图通用配置.docx
12-28
折线图的基本配置与柱状图相似，只需将`series.type`设置为`'line'`。你可以控制线条是否平滑（`smooth`属性），设置填充风格（`areaStyle`），以及调整Y轴的范围（`yAxis.scale`）。`markArea`则用于在图表中标注...
vue组件封装echart折线图
08-30
使用Vue组件封装Echart柱状图，直接引用组件js，并且在需要展示的地方，进行Vue数据传值，支持多坐标轴。本案例非Webpack打包，直接引用JS即可。适用于部分页面使用Vue功能，或者想尝试Vue功能的同学。该组件使用...
echarts 最全地图json加demo
03-24
这包括不同类型的图表（如柱状图、折线图）、图表的交互效果、自定义主题、时间序列分析等等。 总的来说，"echarts 最全地图json加demo"这个资源包提供了创建ECharts地图所需的全部要素，无论是新手还是经验丰富的...
echarts地图生成工具
11-24
ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，并且在地图图表方面具有强大的功能。ECharts地图生成工具是为了方便开发者快速制作自定义的地图数据展示而设计的。...
基于ECharts Geo的地图数据可视化设计与实现
04-15
1. **ECharts**：ECharts是一款由百度开源的、基于JavaScript的数据可视化库，支持丰富的图表类型，如柱状图、折线图、饼图以及地图等。其特点是轻量级、可定制性强，并且兼容多种浏览器。 2. **ECharts Geo组件**...
echarts柱形图 划分多个markLine 标准线
weixin_55338597的博客
08-30 765
echart 柱状 动态 markLine 分区展示
echart 实现多柱状图+多折线图
weixin_46738628的博客
11-01 3688
当图表中存在多个柱状图时，让每条折线折点对应在每个柱状图中点位置
echarts 柱状折线图（折叠柱状图）月年汇总
今晚吃火锅的博客
10-16 1195
echarts柱状图年月汇总形式
Echarts柱状图属性设置大全
sleepwalker_1992的专栏
08-29 1万+
Echarts柱状图属性设置大全
Echarts柱状图，饼状图，折线图案例
涂作权的博客
04-22 3583
在使用Echarts之前需要做的工作是引入Echarts所需的js：/echarts.min.js" charset="utf-8"> 定义要在那个div区域显示图形： similarity-sentence">           unqualified-sentences"> 下面的id就是是上面div的iddistributionDiagram:function(id,top
【echarts】柱图+折线图
xilejie的博客
04-30 1296
// 数据项 powerUse: { realTime: [1, 2, 4, 6], history: [9, 9, 3, 4], dataX: ['2时', '4时', '6时'] } drawChart2() { let myChartContainer4 = document.getElementById("chartContainer2"); if (myChartContainer4) { this.echart2 = this.$echa
echarts 双柱状图和折线图
06-03
ECharts（百度开源的一个数据可视化库）可以很方便地绘制双柱状图和折线图。具体步骤如下： 1. 引入 ECharts 库和主题 ```html <!-- 引入 ECharts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 引入 ECharts 主题 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script> ``` 2. 准备数据 ```js // X 轴数据 var xData = ['一月', '二月', '三月', '四月', '五月', '六月']; // 第一组数据（柱状图） var yData1 = [120, 200, 150, 80, 70, 110]; // 第二组数据（柱状图） var yData2 = [100, 180, 130, 70, 60, 100]; // 第三组数据（折线图） var yData3 = [90, 160, 120, 60, 50, 90]; ``` 3. 配置 ECharts ```js // 初始化 ECharts 实例对象 var myChart = echarts.init(document.getElementById('chart')); // 设置 ECharts 配置项 var option = { // 设置图表标题 title: { text: '双柱状图和折线图', left: 'center' }, // 设置图例 legend: { data: ['第一组', '第二组', '第三组'], top: 30 }, // 设置 X 轴 xAxis: { type: 'category', data: xData }, // 设置 Y 轴 yAxis: [ { type: 'value', name: '第一组/第二组', axisLabel: { formatter: '{value} 元' } }, { type: 'value', name: '第三组', axisLabel: { formatter: '{value} %' } } ], // 设置数据系列 series: [ { name: '第一组', type: 'bar', data: yData1 }, { name: '第二组', type: 'bar', data: yData2 }, { name: '第三组', type: 'line', yAxisIndex: 1, data: yData3 } ], // 设置图表主题 color: ['#5470c6', '#91cc75', '#fac858'] }; // 渲染图表 myChart.setOption(option); ``` 4. 在 HTML 中创建图表容器 ```html <div id="chart" style="width: 600px; height: 400px;"></div> ``` 以上就是使用 ECharts 绘制双柱状图和折线图的基本步骤。可以根据实际需求调整配置项，以达到更好的可视化效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

coderlin_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值