Echarts开源可视化库学习(三)主题的使用
生活随笔
收集整理的這篇文章主要介紹了
Echarts开源可视化库学习(三)主题的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
主題的使用:默認自帶的
echarts工具里面自帶了兩種主題: light 和 dark;
使用
在初始化echarts實例對象的時候定義即可
完整代碼
<!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"),'light')// 初始化echarts實例對象var xDataArr = ['張三', '李四', '王五', '閏土', '小明', '茅臺', '二妞', '大強']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis:{type:'category', //類目軸data: xDataArr,},tooltip:{trigger:'axis',},yAxis:{type: 'value', // 數值軸, 數據通過series 進行配置},series:[{name: '語文',type: 'bar',markPoint:{data:[{type: 'max',neme: '最大值'},{type: 'min',name: '最小值'}]},label:{show: true,position: 'top'},data: yDataArr,}]}//將配置項設置給echarts實例對象mCharts.setOption(option)</script> </body></html>自定義主題
前往echarts官網去下載主題
自定義完之后點擊下載主題.JS即可
主題的引入:
創建文件夾,把下載好的主題拖入即可
<script src="theme/purple-passion.js"></script>跟引入echarts的配置文件的時候相似;
<script src="lib/echarts.min.js"></script>初始化的時候把后面的主題改為剛才下載的主題名稱即可
var mCharts = echarts.init(document.querySelector("div"),'purple-passion')// 初始化echarts實例對象總結
以上是生活随笔為你收集整理的Echarts开源可视化库学习(三)主题的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基础数据仓库环境搭建(二) Hadoop
- 下一篇： 基础数据仓库环境搭建(三)Zookeep