Echarts数据可视化 第5章 色彩搭配 5.1 色彩主题
Echarts数据可视化
文章目录
- Echarts数据可视化
- 第5章 色彩搭配
- 5.1 色彩主题
Echarts数据可视化：入门、实战与进阶
第5章 色彩搭配
5.1 色彩主题
Echarts 官网界面为我们提供了主题下载页面
地址：https://echarts.apache.org/zh/download-theme.html
Echarts 官方提供了多种可选的主题，包括 vintage、dark、macarons、infographic等
所谓的色彩主题就是在该主题下的一系列可视化图的色彩都遵循的主题配色，它可以帮助我们统一可视化图的色彩样式。
以macarons 主题为例
直接点它
可以看到是一个js 文件。下载下来
来实战一下
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>没有加入色彩主题的可视化title><script src="../js/echarts.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: '产品一周销量情况（未加入色彩主题）'},xAxis: {type: 'value'},yAxis: {type: 'category',data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']},legend: {data: ['A产品', 'B产品'],left: 'right'},series: [{name: 'A产品',data: [100, 150, 120, 90, 50, 130, 110],type: 'bar',label: {show: true,position: 'right'}},{name: 'B产品',data: [120, 130, 110, 70, 60, 110, 140],type: 'bar',label: {show: true,position: 'right'}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
script>
body>
html>
现在是没有加入我们刚刚下载的那个主题js 文件，效果如下
这下引入下载的macarons 色彩主题，
DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>加入了色彩主题的可视化title><script src="../js/echarts.js">script><script src="../js/macarons.js">script>
head>
<body>
<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'), 'macarons');// 指定图表的配置项和数据var option = {title: {text: '产品一周销量情况（加入了色彩主题）'},xAxis: {type: 'value'},yAxis: {type: 'category',data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场', 'F商场', 'G商场']},legend: {data: ['A产品', 'B产品'],left: 'right'},series: [{name: 'A产品',data: [100, 150, 120, 90, 50, 130, 110],type: 'bar',label: {show: true,position: 'right'}},{name: 'B产品',data: [120, 130, 110, 70, 60, 110, 140],type: 'bar',label: {show: true,position: 'right'}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
script>
body>
html>
渲染效果
这样就完成了我们色彩主题的配置。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！