数据可视化——柱状图

数据可视化——柱状图

在这里插入图片描述
代码

 <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文件

发布了4 篇原创文章 · 获赞 0 · 访问量 21
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览