echarts主題配置
背景
ECharts 是我們在項目中經常使用的數據可視化插件，默認的主題樣式基本能滿足我們的需求，但是總有難搞讓人頭疼的亂七八糟的需求。還好我們scharts足夠強大和人性化，真愛了，哭了
echarts主題構建工具
首先，我們打開echarts的主題構建工具，如圖：
配置文件下載
主題樣式配置完畢后我們需要將配置文件下載或者導出來，點擊頁面左上角的下載或者導出echarts很貼心的為我們提供了 “.js” “.json” 兩種格式的文件，本文將就js格式的配置文件為大家演示
引入配置文件
在項目中引進下載好的配置文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echats主題配置</title>
</head>
<body>
<div id="main" style="width: 1000px;height:500px;"></div>
<script src="./echarts/echarts.min.js"></script>
<script src="./echarts/macarons.js"></script>
</body>
使用
只需要我們在初始化echats時指定主題名稱即可，主題名稱就是主題的文件名，
// 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main'),'macarons'); // 指定圖表的配置項和數據 var option = { title : { text: '柱狀圖', subtext: '主題配置' }, ... }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);
---------------------------------主題設置完成-----
折線圖彩色定義線條顏色
series: [ {data: [40,60,20,70,60,70,10,], name: "幸福路", stack: "", symbol: 'circle',//折線點設置為實心點 symbolSize: 12, //折線點的大小 smooth: true, itemStyle: { color: '#95CACA', shadowColor: '#5CADAD', shadowBlur: 9.5, }, lineStyle: { width: 4, shadowColor: "#95CACA", shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, shadowBlur: 8, type: "solid" }, type: "line"}, {data: [20,30,20,70,60,100,30,], name: "職教", stack: "", symbol: 'circle',//折線點設置為實心點 symbolSize: 12, //折線點的大小 smooth: true, itemStyle: { color: '#FFAD86', shadowColor: '#FF8040', shadowBlur: 9.5, }, lineStyle: { width: 4, shadowColor: "#FFAD86", shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, shadowBlur: 8, type: "solid" }, type: "line"}, {data: [50,10,53,56,10,110,60,], name: "綠灣", symbol: 'circle',//折線點設置為實心點 symbolSize: 12, //折線點的大小 smooth: true, itemStyle: { color: '#CA8EFF', shadowColor: '#B15BFF', shadowBlur: 9.5, }, lineStyle: { width: 4, shadowColor: "#CA8EFF", shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, shadowBlur: 8, type: "solid" }, stack: "", type: "line"}, {data: [80,19,43,66,18,30,65,], name: "西區", stack: "", symbol: 'circle',//折線點設置為實心點 symbolSize: 12, //折線點的大小 smooth: true, itemStyle: { color: '#84C1FF', shadowColor: '#46A3FF', shadowBlur: 9.5, }, lineStyle: { width: 4, shadowColor: "#84C1FF", shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, shadowBlur: 8, type: "solid" }, type: "line"}, {data: [53,30,83,58,18,80,63,], name: "北區", stack: "", symbol: 'circle',//折線點設置為實心點 symbolSize: 12, //折線點的大小 smooth: true, itemStyle: { color: '#7AFEC6', shadowColor: '#1AFD9C', shadowBlur: 9.5, }, lineStyle: { width: 4, shadowColor: "#7AFEC6", shadowOffsetX: 0, shadowOffsetY: 0, opacity: 1, shadowBlur: 8, type: "solid" }, type: "line"}, ]