ECharts，基础
Posted 一粒尘埃丶流年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts，基础相关的知识，希望对你有一定的参考价值。
一、上一章，我们按照网上的案例，写了一个非常简单的图表。这一章让我们来继续玩耍它。
二、个性化图表样式
1.南丁格尔图（饼图）
把鼠标移到上面某个区域，相应区域则是会变大的哦。
1.因为这个南丁格尔图（饼图），主要是通过扇形的弧度表现不同类目，因为不在直角坐标系，所以也不需要xAxis，yAxis。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="js/echarts.js"></script> 7 </head> 8 9 <body> 10 <div id="main" style="width:600px;height:400px;"></div> 11 </body> 12 <script type="text/javascript"> 13 // 基于准备好的dom，初始化echarts实例 14 var myChart = echarts.init(document.getElementById(\'main\')); 15 var arr = 105; 16 // 指定图表的配置项和数据 17 var option ={ 18 series : [ 19 { 20 name: \'访问来源\', 21 type: \'pie\', 22 radius: \'85%\', 23 data:[ 24 {value:arr, name:\'视频广告\'}, 25 {value:274, name:\'联盟广告\'}, 26 {value:310, name:\'邮件营销\'}, 27 {value:335, name:\'直接访问\'}, 28 {value:400, name:\'搜索引擎\'} 29 ] 30 } 31 ] 32 }; 33 // 使用刚指定的配置项和数据显示图表。 34 myChart.setOption(option); 35 36 37 myChart.setOption({}) 38 </script> 39 </html>
我们可以通过加入roseType来把他变成南丁格尔图，
1 roseType: \'angle\'
代码太多了，我就不复制那么多了，
1 <body> 2 <div id="main" style="width:600px;height:400px;"></div> 3 </body> 4 <script type="text/javascript"> 5 // 基于准备好的dom，初始化echarts实例 6 var myChart = echarts.init(document.getElementById(\'main\')); 7 var arr = 105; 8 // 指定图表的配置项和数据 9 var option ={ 10 series : [ 11 { 12 name: \'访问来源\', 13 type: \'pie\', 14 radius: \'85%\', 15 roseType: \'angle\', 16 data:[ 17 {value:arr, name:\'视频广告\'}, 18 {value:274, name:\'联盟广告\'}, 19 {value:310, name:\'邮件营销\'}, 20 {value:335, name:\'直接访问\'}, 21 {value:400, name:\'搜索引擎\'} 22 ] 23 } 24 ] 25 }; 26 // 使用刚指定的配置项和数据显示图表。 27 myChart.setOption(option); 28 29 30 </script>
2.阴影的配置
ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。例如阴影的样式可以通过下面几个配置项设置：
1 <body> 2 <div id="main" style="width:600px;height:400px;"></div> 3 </body> 4 <script type="text/javascript"> 5 // 基于准备好的dom，初始化echarts实例 6 var myChart = echarts.init(document.getElementById(\'main\')); 7 var arr = 105; 8 // 指定图表的配置项和数据 9 var option ={ 10 series : [ 11 { 12 name: \'访问来源\', 13 type: \'pie\', 14 radius: \'85%\', 15 roseType: \'angle\', 16 itemStyle: { 17 // 阴影的大小 18 shadowBlur: 200, 19 // 阴影水平方向上的偏移 20 shadowOffsetX: 0, 21 // 阴影垂直方向上的偏移 22 shadowOffsetY: 0, 23 // 阴影颜色 24 shadowColor: \'rgba(0, 0, 0, 0.5)\' 25 }, 26 data:[ 27 {value:arr, name:\'视频广告\'}, 28 {value:274, name:\'联盟广告\'}, 29 {value:310, name:\'邮件营销\'}, 30 {value:335, name:\'直接访问\'}, 31 {value:400, name:\'搜索引擎\'} 32 ] 33 } 34 ] 35 }; 36 // 使用刚指定的配置项和数据显示图表。 37 myChart.setOption(option); 38 </script>
itemStyle的emphasis是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。
1 itemStyle: { 2 emphasis: { 3 shadowBlur: 200, 4 shadowColor: \'rgba(0, 0, 0, 0.5)\' 5 } 6 }
但是我个人在这个示例里没感觉出来什么区别。
3.深色背景和浅色标签
现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。
背景色是全局的，所以直接在 option 下设置 backgroundColor（图1）
1 setOption({ 2 backgroundColor: \'#2c343c\' 3 })
（图1）
全局代码：
1 <body> 2 <div id="main" style="width:600px;height:400px;"></div> 3 </body> 4 <script type="text/javascript"> 5 // 基于准备好的dom，初始化echarts实例 6 var myChart = echarts.init(document.getElementById(\'main\')); 7 var arr = 105; 8 // 指定图表的配置项和数据 9 var option ={ 10 backgroundColor: \'#2c343c\', 11 series : [ 12 { 13 name: \'访问来源\', 14 type: \'pie\', 15 radius: \'85%\', 16 roseType: \'angle\', 17 data:[ 18 {value:arr, name:\'视频广告\'}, 19 {value:274, name:\'联盟广告\'}, 20 {value:310, name:\'邮件营销\'}, 21 {value:335, name:\'直接访问\'}, 22 {value:400, name:\'搜索引擎\'} 23 ] 24 25 } 26 ] 27 }; 28 // 使用刚指定的配置项和数据显示图表。 29 myChart.setOption(option); 30 </script>
文本的样式可以设置全局的 textStyle。（图2）
1 setOption({ 2 textStyle: { 3 color: \'rgba(255, 255, 255, 0.3)\' 4 } 5 })
（图2）
全局代码：
1 <body> 2 <div id="main" style="width:600px;height:400px;"></div> 3 </body> 4 <script type="text/javascript"> 5 // 基于准备好的dom，初始化echarts实例 6 var myChart = echarts.init(document.getElementById(\'main\')); 7 var arr = 105; 8 // 指定图表的配置项和数据 9 var option ={ 10 backgroundColor: \'#2c343c\', 11 textStyle:{ color: \'rgba(255, 255, 255, 0.3)\'}, 12 13 series : [ 14 { 15 name: \'访问来源\', 16 type: \'pie\', 17 radius: \'85%\', 18 roseType: \'angle\', 19 data:[ 20 {value:arr, name:\'视频广告\'}, 21 {value:274, name:\'联盟广告\'}, 22 {value:310, name:\'邮件营销\'}, 23 {value:335, name:\'直接访问\'}, 24 一基础折线图详解《手把手教你 ECharts 数据可视化详解》Qt+ECharts开发笔记：ECharts的柱状图介绍基础使用和Qt封装Demo