百度echarts图表配置语法介绍

做一个百度eCharts需要哪些函数，下面web建站小编给大家介绍一下百度eCharts图表的配置语法。

一、创建一个html页面

//引入echarts
<script src="echarts.min.js"></script>
//新建一个div
<div id="main" style="width: 600px; height:400px;"></div>

二、echarts配置语法介绍

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

标题

title: {
  text: '名称'
}

提示信息

tooltip: {}

图例组件

legend: {
  data: [{
    name: '系列1',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
      color: 'red'
    }
  }]
}

X 轴

xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴

yAxis: {}

系列列表

series: [{
  name: '销量',  // 系列名称
  type: 'bar',  // 系列图表类型
  data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

图表类型介绍：

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列

百度echarts雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色（每根柱子一种颜色）

百度echarts图表数据为空如何展示"暂无数据"

百度echarts柱状图/折线图x轴显示全部文本（太长自动换行）

标签： echarts, 百度echarts

上面是“百度echarts图表配置语法介绍”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2463.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！