匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。var option = {
& &title : {
& & & &text: '数据来源',
& & & &x:'center'
& &tooltip : {
& & & &trigger: 'item',
& & & &formatter: &{a} &br/&{b} : {c} ({d}%)&
& &legend: {
& & & &orient: 'vertical',
& & & &left: 'left',
& & & &data: ['文章','论坛','漏洞','微博','知乎']
& &series : [
& & & & & &name: '数据来源',
& & & & & &type: 'pie',
& & & & & &radius : '55%',
& & & & & &center: ['50%', '60%'],
& & & & & &data:[
& & & & & & & &{value:sum_article, name:'文章'},
& & & & & & & &{value:sum_bbs, name:'论坛'},
& & & & & & & &{value:sum_vul, name:'漏洞'},
& & & & & & & &{value:sum_weibo, name:'微博'},
& & & & & & & &{value:sum_zhihu, name:'知乎'}
& & & & & &],
& & & & & &itemStyle: {
& & & & & &normal:{
& & & & & &
& & & & & &
show:true,
& & & & & &
formatter: '{b} : {c} \n ({d}%)'
& & & & & &
& & & & & &
labelLine:{
& & & & & &
& & & & & &
& & & & & &
& & & & & & & &emphasis: {
& & & & & & & & & &shadowBlur: 10,
& & & & & & & & & &shadowOffsetX: 0,
& & & & & & & & & &shadowColor: 'rgba(0, 0, 0, 0.5)'
& & & & & & & &}
& & & & & &}
& &color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']
红色部分的代码是用来在echarts鼠标不hover在扇形上的时候显示数据的，其中/n用来换行。
绿色部分是改变扇形的颜色，每一个rgb对应data里的一项数据，也可以用十六进制表示颜色。
本文已收录于以下专栏：
相关文章推荐
之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！
1、折线图修改颜色：
type: 'category...
option = {
        title : {
        text: '全局指标状态分布图',
            &...
在做echarts饼图的时候，默认是不显示数据，现在要直接把数据显示在上面，代码如下：
name: '处理状态',
最近在做一个网上书店的项目，其中有一个功能就是对于查到的书籍进行分页显示，前面单独学习分页时没有学好，导致不怎么会做，所以搜到了CSDN上一位大神的博客直接拿过来套用了，因为后面可能还会用到，所以现在...
series : [ {
//name : '',
name:'',
type : 'pie',
radius : '65%',
center : [ '50%', '50%' ],
如果我在A页面把页面下拉了，再点击跳转到B页面，页面的位置不是现实的最顶端（而是A页面的页面位置）。如何让页面每次跳转都把下一个页面的时候，都让页面显示在顶部：
使用 $anchorScroll
轮播图前后页面切换按钮交互
因为不喜欢千篇一律的鼠标悬停改变背景透明度的交互，项目中改写了swiper插件中自带的切换按钮样式，实现鼠标悬停时左右翻页箭头的大小变换交互：代码:
echar饼状图在区域名字后显示值及其百分比
echarts 之（3）环形图 属性
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)echarts3饼图柱形图显示数据
echarts3饼图柱形图显示数据。
name: '成绩分布',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: serie,
itemStyle:{
show: true,
formatter: '{b} : {c} ({d}%)'
labelLine :{show:true}
show: true,
position: 'inside'初步使用echarts&饼图，柱图的一点总结
echarts是封装好的JS库，里面有很多写好的方法来在页面上画图，其实理解为一个接口，引入外部的包然后调用它的方法；使用echarts先要导包（引入echarts-min.js）这是必须的（如果项目是外网的也可以直接require.config({paths:
'/build/dist'}}),两种方式就是将js引入页面的方式不同，一个本地一个网络的方式；然后init初始化得到一个echart对象，随后echarts对象通过setoption(option)来传参数，之后将图表画到页面上。
我们开始使用的时候可以到官网上通过粘贴复制就可以去把类似的option拿来，改变其中series，xAxis,legend等，放入想要的数据,就可以得到一般想要的报表。
&&交互数据，如何把取到的值展示出来
使用的参数基本都是键值对，就是JSon，传递JSON格式规范的数据，键值对形式。假如我们使用ajax的方式去获取数据来展示（ajax用的还是比较广泛），然后分两种传递到JSde情况吧
1.在单个series的情况下，我们可以直接在后台封装series中的data数组，前台给option加初始值的时候能够更方便的调整样式，更加美观方便，然而正规的series应该都是如下
&series: [
&name: '时间',
& type: 'bar',
& &data: [30, 13, 21.5],
barWidth : 30,
itemStyle:{
normal:{color:'#3366FF'} } } ]
应该是一个对象数组，如果去掉方括号在某些情况下初始化都会遇到问题，如果后台拼装好data数组，前台直接
option.series[0].data来把数据放入（花括号就用对象.属性，方括号就用对象【index】.属性）
2.其实上面是最笨的方法，我们最终的目的是吧数据，也就是data这个数组，完全可以后台只去拿一个data，返回一个obj。将对象传递到初始化的方法中，然后在data相应的位置赋值就可以（只要series是确定的数量，不确定你要个图表干什么）
ajax--请求--成功--返回一个obj--调用echarts初始化方法（obj对象作为参数传过来）
function(obj){
var echar=echarts.init(****)
var option={
xAxis:****;
yAxs:****;
& & &name:
& & & type:
&data: obj.data[index],
barWidth : 30,
itemStyle:{
normal:{color:'#3366FF'} } }
echar.setOption(option)
感觉到这样还是比较好用
&&简单说几种效果吧：
1.在柱图，折线图上面展示value值，可以通过itemstyle里面一系列的设置得到效果还有颜色等
2.Y轴坐标反转，就在Yaxis里面添加inverse：true
3.....主要的效果，可以直接看效果出现的地方，然后在API配置手册里面去寻找对应的属性，坐标轴请找AXIS，图例请找LEGEND,对应传入数据数组的找series，基本都能找到（除开打组合拳的）
&&然后再主要总结一下echarts
option结构：
1.series：
series在option中就是放数据的东西，每一个series顾名为系列，就像是一组数据，可以是方括号括起来的series数组也可以是单独的series
&obJ，后台封装的时候一定要按照里面的数据格式来对齐，这是最关键的地方吧，整个图标效果就是看的这里
2.xAxis,yAxis
坐标轴，数据基本上都可以在后台用一个数组封装，前台option.xAxis.data接收一下就OK。如果需要双坐标，将Axis下面的对象变成数组对象即可得到坐标（series中相应的数据需要指定用哪一个轴）
坐标光有data还不可以显示，还需要series里的数据来支持显示，当数据全部为空的时候，坐标是一个都不会显示的，这个时候就把为null的值换成数值0就好了（感觉这样的需求很奇怪，没有数据也要显示坐标，可惜需求才是大爷，没办法）
关于单位不得不说一下两种方式；
第一种：axis里面有个name属性，可以放坐标轴的单位，通过position选择单位放的位置，这个的缺点是只能显示一个，不能在每一个坐标值后面跟上单位。
第二种：通过
axisLable.formatter去设置，本来试出来一种比较简单的方式，暂时忘记了，哪天补上，这里有一个进阶的echarts知识，就是formatter，具体还没有研究透，有一个传送门看起来又可以打开一扇门
echarts默认的有色系，不过都比较鲜艳，可以自己用一个数组放自己的色系，颜色会按照legend.data数据的出现先后顺序相应给颜色。（针对饼图这一类，legend.data[index].name要和series中对应。不然会出现奇怪的东西）；
textstyle里面可以设置标题的各种样式
举个例子，{x:10%,x2:10%}就是说这个图表在echarts控件初始化那个DIV中左右内边距10%。感觉这个就这点用了；
legend，title经常会换一些位置，默认值title{}legend{}（是有的，没总结），通过y:bottom，x:center这些可以随便放，legend的瑕疵感觉就是它图例的所在空间大小没法设定，只有把图表本体给放小（通过X,X2，Y,Y2），还有设置图例间距大小等方法。
——————————————————手动分割———————————————————————
&& 没有数据的时候可能会使图表一片空白，很不友好，目前会用的方法有二
1.觉得可行的就是在JS中加一个判断，当数据为空的时候，我们设置一个专门的option去set一下展示暂无数据，就用里面的title属性就能展示出效果了，然后还可以根据官方的nodataloadoption这个项去参照设置例如气泡等效果；
2.对数据动手脚，查询的时候，我们一般会在数据库查出两个字段，一个对应坐标轴，一个对应坐标上的数据，当查不到想要的数据，或者字段数据确实为空，我们按封装方式，会在循环里把坐标轴和数据对应起来去取。这样，当series.data中所有数据为空时，前台echarts部分会出现空白的情况。
此时我们可以用nvl转换null为0，然后axis的data正常取，前端会显示出坐标轴，不至于出现空白，总之数据不能全为空，但是可以全为0；差不多也能满足需求
&&最后就是点击事件了
api上都有，，没用处什么花来
————————————————————————分割———————————————————
柱图和饼图都是基础，用熟悉了再去碰些花哨的折线，面积，堆叠都简单得很了。下一步再大不了看一下echarts内置的函数，又能玩出好多花来
&&最后的最后
echarts的API说实话真的简陋。通过查对象属性和官网的示例还是能够满足开发需要的
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。