Site Notice
hello, world
Difference between revisions of "ECharts"
From Project-EPB Commons
m ([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | <div class="echarts" style="width: 100%;height:400px;" | + | <div class="echarts" style="width: 100%;height:400px;">{ |
"title": { | "title": { | ||
"text": "ECharts 入门示例" | "text": "ECharts 入门示例" | ||
| Line 16: | Line 16: | ||
"data": [5, 20, 36, 10, 10, 20] | "data": [5, 20, 36, 10, 10, 20] | ||
}] | }] | ||
| − | } | + | }</div> |
<div class="Echarts" style="width: 100%;height:400px;"><pre>{ | <div class="Echarts" style="width: 100%;height:400px;"><pre>{ | ||
| Line 105: | Line 105: | ||
}</pre></div> | }</pre></div> | ||
| − | < | + | <div class="Echarts" style="width: 100%;height:400px;"><pre>{ |
tooltip: { | tooltip: { | ||
trigger: 'item', | trigger: 'item', | ||
| Line 192: | Line 192: | ||
} | } | ||
] | ] | ||
| − | }</pre> | + | }</pre></div> |
Latest revision as of 00:57, 3 January 2020
{
"title": {
"text": "ECharts 入门示例"
},
"tooltip": {},
"legend": {
"data": ["销量"]
},
"xAxis": {
"data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
"yAxis": {},
"series": [{
"name": "销量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}]
}{
"title": {
"text": "交错正负轴标签",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AjwF2AgQm"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": 80,
"bottom": 30
},
"xAxis": {
"type": "value",
"position": "top",
"splitLine": {
"lineStyle": {
"type": "dashed"
}
}
},
"yAxis": {
"type": "category",
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"data": ["ten", "nine", "eight", "seven", "six", "five", "four", "three", "two", "one"]
},
"series": [{
"name": "生活费",
"type": "bar",
"stack": "总量",
"label": {
"show": true,
"formatter": "{b}"
},
"data": [{
"value": -0.07,
"label": {
"position": "right"
}
},
{
"value": -0.09,
"label": {
"position": "right"
}
},
0.2, 0.44,
{
"value": -0.23,
"label": {
"position": "right"
}
},
0.08,
{
"value": -0.17,
"label": {
"position": "right"
}
},
0.47,
{
"value": -0.36,
"label": {
"position": "right"
}
},
0.18
]
}]
}{
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner'
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直达', selected: true},
{value: 679, name: '营销广告'},
{value: 1548, name: '搜索引擎'}
]
},
{
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'],
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
data: [
{value: 335, name: '直达'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1048, name: '百度'},
{value: 251, name: '谷歌'},
{value: 147, name: '必应'},
{value: 102, name: '其他'}
]
}
]
}
