数据可视化——柱状图

最新推荐文章于 2024-01-06 16:32:25 发布

zcm645500

最新推荐文章于 2024-01-06 16:32:25 发布

阅读量4k

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/qq_46028841/article/details/105085891

版权

数据可视化——柱状图

在这里插入图片描述
代码

 <body>
  <div id="main" style="width:600px;height:400px;border:1px solid black">

  </div>
  <script src="js/echarts.min.js"></script>
  <script>
  //初始化echarts实例
  var myChart=echarts.init(document.getElementById("main"))
  //设置图表内容 option里面json格式 名字：值
  var option={
  title:{
  text:"人员构成",
  x:"center",
  y:"bottom"
  },
  tooltip:{show:true},
  legend:[{
    name:"各省份的学生数",
	icon:"circle"
  }],
  xAxis:{
  type:"category",
  data:["江西","浙江","广东","福建","湖南"]
  },
  yAxis:{
  type:"value"
  },
  series:[{
  name:"各省份的学生数",
  type:"bar",
  data:[30,50,20,60,80]
  },
	  {
	  name:"各省份的学校参与数",
      type:"bar",
      data:[3,5,2,6,8]
	  
	  }
  
  ]
  };
  //把图表放入实例中
  myChart.setOption(option);
  </script>
 </body>

笔记

echarts数据可视化
百度技术团队 echartsjs.com
1.什么是echarts？
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖canvas画布矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
2.echarts的特点？
开源，运行在 PC 和移动设备，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等
3.使用echarts?
下载：
应用：1.引入echarts的js文件
2.HTML设置一个具有宽高的容器
3.将容器初始化echarts实例 echarts.init
4.设置图表的样式
5.将图表放入容器中

echarts：配置组件（全局属性），图表，数据
常用配置组件：
1.title：标题组件
{
text：标题内容，
x：x轴位置，
y: Y轴位置
}

附加：几乎所有的组件布局，都可以使用x，y，left，right，top，bottom，position属性名取值：数字（默认单位px）百分比方向词center
2.series：图表组件
{
name:图表数据的名称，
type：图表类型，柱状图bar 折线图line
data：图表数据
}
3.直角坐标系
xAxis：{
type:“category”//自定义x轴显示内容
data:[]
}
yAxis：{
type:“value”
}
4.数据说明：对数据解释说明，用户交互操作
legend:{
name:对应图表组件里的名称,
icon:“img://图片路径”
}
5.提示信息鼠标hover图表数据上显示的内容
tooltip：{
show:true
}
2.series：图表组件
{
yAxisIndex:[1]//数据对应的Y轴数组下标，默认值0
}
yAxis：
{
type:“value”，
min： //value最小值
max： //value最大值
}

注意

js文件要和HTML代码放在同一目录下，js文件从官网找
echarts的js文件

zcm645500

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——柱状图

数据可视化——柱状图代码 ]};//把图表放入实例中myChart.setOption(option); ## 笔记echarts数据可视化百度技术团队 echartsjs.com1.什么是echarts？ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10...
复制链接

扫一扫