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