Echarts开源可视化库学习(二)常用图表的实现与效果
生活随笔
收集整理的這篇文章主要介紹了
Echarts开源可视化库学习(二)常用图表的实现与效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.柱狀圖
一.Echarts最基本的代碼結構
x軸數據和y軸數據
圖標類型:option編寫
var option = {xAxis:{type:'category', //類目軸data: xDataArr},yAxis:{type: 'value', // 數值軸, 數據通過series 進行配置},series:[{name: '語文',type: 'bar',data: yDataArr}]}//將配置項設置給echarts實例對象mCharts.setOption(option)代碼與效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="lib/echarts.min.js"></script> </head><body><div style="width: 600px;height:400px"></div> <script>//1. ECharts最基本的代碼結構var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts實例對象var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺', '二妞', '大強']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis:{type:'category', //類目軸data: xDataArr},yAxis:{type: 'value', // 數值軸, 數據通過series 進行配置},series:[{name: '語文',type: 'bar',data: yDataArr}]}//將配置項設置給echarts實例對象mCharts.setOption(option)</script> </body></html>對柱狀圖的一些優化和修改
1.顯示最大最小值
.markPoint:{data:[{type: 'max',neme: '最大值'},{type: 'min',name: '最小值'}]},
在series里面,添加markPoint方法
2.通過label配置顯示數據
label:{show: true},使數據精確顯示具體數據
總結
以上是生活随笔為你收集整理的Echarts开源可视化库学习(二)常用图表的实现与效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NatApp 内网穿透工具简单使用介绍说
- 下一篇： hadoop的HDFS-----防火墙导