echarts

最新推荐文章于 2024-10-03 20:14:40 发布

m0_56381561

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量63

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_56381561/article/details/126458684

版权

本文详细介绍了ECharts的初始化、选项配置以及各种图表类型的使用，包括柱状图、线形图、饼形图等。通过实例展示了如何设置标题、图例、提示、轴线及系列数据，并讨论了图表的自适应缩放。通过对ECharts API的深入理解，开发者可以创建出丰富多样的数据可视化效果。

摘要由CSDN通过智能技术生成

初始化
var echart = echarts.init(dom节点,主题)

定义选项option
var option = {
title标题
legend图例
color调试版本
tooltip提示
xAxis轴线X
yAxis轴线Y
series系列数据
}

更新选项
echart.setOption(option)

三、选项

1.标题title
text文本

2.图例legend
{data:["name1","name2"]}

3.提示tooltip
name: "问答题"

4.X轴线
{data:["x1","x2",...]}

5.Y轴线
{data:["y1","y2",...]}

6.系列数据
bar
{
name:'名称',
type:'bar',
}

、图表的类型

柱状图
type: "bar"

线形图
type: "line"

平滑线形图
type: "line"
smooth: true

面型图
type: "line",
areaStyle:{color: 'pink'}

饼形图
type: "pie",
让图表跟随屏幕自适应

  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });

关注