- grid 和 title.left(bottom,right,top)關(guān)系
image.png
//設(shè)置
title: {
left: 'center' //將標(biāo)題居中，數(shù)據(jù)類型為number或string
},
grid: {
show: true //顯示邊框線
}
- legend(圖列)
image.png
***
//設(shè)置
legend: {
data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎']
},
series: {
data: [
{
value: 335,
name: '直接訪問'
},
{
value: 310,
name: '郵件營銷'
},
{
value: 234,
name: '聯(lián)盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
]}
滾動圖例(點(diǎn)擊三角形圖標(biāo)跳到對應(yīng)頁面)
image.png
//以下2種調(diào)用方法可以設(shè)置跳到哪個元素
myChart.dispatchAction({
type: 'legendScroll',
scrollDataIndex: 26,
// legendId: ''
})
-------------------------------------------------
legend: {
scrollDataIndex: number,//
跳到索引對應(yīng)的數(shù)據(jù)上,
但官網(wǎng)不推薦這種做法,說太重量了
}
//配置
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: data.legendData,
scrollDataIndex: number,//跳到索引對應(yīng)的數(shù)據(jù)上,但官網(wǎng)不推薦這種做法,說太重量了
},
series: [{
name: '姓名',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
function genData(count) {
var nameList = [
'趙', '錢', '孫', '李', '周', '吳', '鄭', '王', '馮', '陳', '褚', '衛(wèi)', '蔣', '沈', '韓', '楊', '朱', '秦', '尤', '許', '何', '呂', '施', '張', '孔', '曹', '嚴(yán)', '華', '金', '魏', '陶', '姜', '戚', '謝', '鄒', '喻', '柏', '水', '竇', '章', '云', '蘇', '潘', '葛', '奚', '范', '彭', '郎', '魯', '韋', '昌', '馬', '苗', '鳳', '花', '方', '俞', '任', '袁', '柳', '酆', '鮑', '史', '唐', '費(fèi)', '廉', '岑', '薛', '雷', '賀', '倪', '湯', '滕', '殷', '羅', '畢', '郝', '鄔', '安', '常', '樂', '于', '時', '傅', '皮', '卞', '齊', '康', '伍', '余', '元', '卜', '顧', '孟', '平', '黃', '和', '穆', '蕭', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '貝', '明', '臧', '計(jì)', '伏', '成', '戴', '談', '宋', '茅', '龐', '熊', '紀(jì)', '舒', '屈', '項(xiàng)', '祝', '董', '梁', '杜', '阮', '藍(lán)', '閔', '席', '季', '麻', '強(qiáng)', '賈', '路', '婁', '危'
];
var legendData = [];
var seriesData = [];
for (var i = 0; i < 50; i++) {
name = Math.random() > 0.65 ?
makeWord(4, 1) + '·' + makeWord(3, 0) :
makeWord(2, 1);
legendData.push(name);
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
});
}
return {
legendData: legendData,
seriesData: seriesData
};
function makeWord(max, min) {
var nameLen = Math.ceil(Math.random() * max + min);
var name = [];
for (var i = 0; i < nameLen; i++) {
name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
}
return name.join('');
}
}
- axisPointer 中的label和lineStyle用法.
image.png
//配置
axisPointer: {
show: true,//這個一定要為true，顯示出來
type: 'line',
label: {
textStyle: {
backgroundColor: 'red',//指示器的顏色。
}
},
lineStyle: {
color : 'yellow'//指示器線的顏色.
}
image.png
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
},
// 通過css來控制浮層的外觀
extraCssText: 'background-color: red'
},
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
Math.round(value)
]
}
}
var now = +new Date(2017, 7, 1);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
- 多圖聯(lián)動 和 詳細(xì)配置參數(shù) demo
var option1 = {
calculable: true,
dataZoom: [{
type: 'slider',
start: 10,//控制滾軸的起始點(diǎn)
end: 40,//控制滾軸的結(jié)束點(diǎn)
height: 10,//控制滾軸的高度
bottom: 4,//控制滾軸的距離
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',//控制滾軸2邊icon的形狀
handleSize: '50%',//控制2邊icon的大小
dataBackground: {
areaStyle: {
color: 'transparent'//控制滾軸內(nèi)部顏色
},
lineStyle: {
opacity: 0.8,
color: 'transparent'//控制滾軸內(nèi)線的顏色
}
},
handleStyle: {
color: 'red',//控制滾軸2邊icon的顏色
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}, {
type: 'inside'
}],
textStyle: {
textShadowOffsetX: 5
},
title: {
show: true,//是否顯示標(biāo)題.
text: '每日客流達(dá)成量 單位: 百/人次',//標(biāo)題內(nèi)容
textStyle: {//標(biāo)題的樣式的相關(guān)設(shè)置
fontSize: 14,
fontFamily: 'MicrosoftYaHei',
fontWeight: "lighter",
color: '#808080'
},
left: 101,//標(biāo)題的位置
top: 18,
padding: 8,
borderColor: '#58a',
borderWidth: 3
},
legend: {//圖例
// orient: 'vertical'
itemGap: 10 //2個圖例之中的距離
},
tooltip: {
show: true,
trigger: 'item', // 觸發(fā)類型，默認(rèn)數(shù)據(jù)觸發(fā)，見下圖，可選為：'item' | 'axis'
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 100, // 隱藏延遲，單位ms
transitionDuration: 0.4, // 動畫變換時間，單位s
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'cross', // 默認(rèn)為直線，可選為：'line' | 'shadow'
label: {
show: true,
}
},
position: function (point, params, dom, rect, size) {
// dom.innerHTML = `<div class="tip" style="border: none;padding: 0;background: transparent" >
// <p> 累計(jì)客流達(dá)成率: <span> ${ params[0]['data']} </span> </p>
// <p> 當(dāng)天累計(jì)客流量: <span> ${ params[1]['data']} </span> </p>
// </div>`
}
},
grid: {//控制網(wǎng)格和本身的距離
// left: '3%',
// right: '4%',
// containLabel: true
show: true,
},
xAxis: [{
type: 'category',
data: dataScope('2017-6-30', '2017-10-1'),
// axisLabel: {
// interval: 1,
// margin: 2,
// },
// axisTick: {
// alignWithLabel: true
// },
// axisLine: {
// lineStyle: {
// }
// }
// show: true,
// axisTick: {
// show: false,
// },
axisLabel: {
textStyle: {//控制坐標(biāo)軸刻度上的文字的樣式
color: '#3b3b3b',
fontFamily: 'MicrosoftYaHei',
fontSize: 20,
}
},
axisLine: {
lineStyle: {////控制坐標(biāo)線的樣式
color: 'red'
}
},
markPoint: {//控制顯示最大值和最小值
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
}],
yAxis: [{
type: 'value',
min: '0',
max: 'dataMax',
data: [0, 10, 20, 30, 40, 50, 60],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#e2e2e2',
}
},
axisLabel: {
show: true,
textStyle: {
color: '#3b3b3b',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
}
},
// splitArea: {
// }
splitLine: {//控制網(wǎng)格線的樣式
lineStyle: {
color: 'red',
}
},
axisPointer: {
show: false
}
}],
formatter: function (params) {
if (params.value == 14) {
return '';
} else {
return params.value;
}
},
series: [{
name: '直接訪問',
type: 'bar',
barWidth: 12,//控制柱狀圖的寬度
data: [4, 7, 9, 10, 12, , 12, 3, 10, 12, 14, 29, 23, 3, 10, 12, 14, 29, 23, 3, 10,
12, 14, 29, 23, 3, 10, 12, 14, 29, 23, 10, 12, 14, 29, 23, 3, 10, 12, 14,
29, 23, 10, 12, 14, 29, 23, 3, 10, 12, 14, 29, 23, 14, 29, 23, 3, 10, 12,
14, 29, 14, 29, 23, 3, 10, , 14, 29, 23, 3, 10, 12, 14, 29, 14, 29, , 29,
14, 29, , 29, 14, 29, 23, 3, 10, 12, 14, 29, 12, 14, 29
],
markPoint: {
symbol: 'circle',
symbolSize: 10,
color: 'transparent',
label: {
normal: {
show: true,
fontSize: 12,
color: '#000',
offset: [0, -15]
}
},
itemStyle: {
normal: {
color: 'transparent',
}
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
itemStyle: {
normal: {
color: function (params) {
var index_color = params.value;
if (index_color >= 20) {
return '#7191b8';
} else {
return '#e65d4d';
}
},
width: 12,
label: {
// show: true,
// position: 'top'
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
var option2 = {
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
optionToContent: function (opt) {
var otc = 'graph.html?formData=yuYueData&title=預(yù)約日報(bào)表';
return otc;
}
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
},
right: 80
},
dataZoom: [{
type: 'slider',
start: 0,
end: 20,
height: 15,
show: false
}],
title: {
show: false,
text: '每日客流達(dá)成率',
textStyle: {
fontSize: 14,
fontFamily: 'MicrosoftYaHei',
fontWeight: "lighter",
color: '#808080'
},
// top: 16,
// left: 45,
// padding: 8,
// borderColor: '#58a',
// borderWidth: 3
},
tooltip: {
show: true,
trigger: 'item', // 觸發(fā)類型，默認(rèn)數(shù)據(jù)觸發(fā)，見下圖，可選為：'item' | 'axis'
showDelay: 20, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
hideDelay: 100, // 隱藏延遲，單位ms
transitionDuration: 0.4, // 動畫變換時間，單位s
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'cross', // 默認(rèn)為直線，可選為：'line' | 'shadow'
label: {
show: true,
},
crossStyle: {
}
},
position: function (point, params, dom, rect, size) {
// dom.innerHTML = `<div class="tip" style="border: none;padding: 0;background: transparent" >
// <p> 累計(jì)客流達(dá)成率: <span> ${ params[0]['data']} </span> </p>
// <p> 當(dāng)天累計(jì)客流量: <span> ${ params[1]['data']} </span> </p>
// </div>`
},
// formatter:
//position: ['50%', '50%'], //相對位置，放置在容器正中間
// backgroundColor: 'red',
},
legend: {
data: [{
name: '每日客流達(dá)成率',
icon: 'line',
}, {
name: '七日均線',
icon: 'line'
}],
itemWidth: 20,
itemHeight: 20,
textStyle: {
color: '#3b3b3b',
fontFamily: 'SourceHanSansCN-Light',
fongSize: 12,
},
// selected: {
// '每日客流達(dá)成率': true,
// '七日均線': true
// // 不想顯示的都設(shè)置成false
// },
itemGap: 40
},
grid: {
// left: '2%',
// right: '4%',
bottom: '2%',
show: true,
// containLabel: true
},
xAxis: {
type: 'category',
color: '#3b3b3b',
boundaryGap: false,
data: dataScope('2017-6-30', '2017-10-1'),
show: false,
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#3b3b3b',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
align: 'right'
}
},
boundaryGap: true,
axisLine: {
onZeroAxisIndex: 0
},
// axisLine: {
// lineStyle: {
// width: 1,
// color: '#e2e2e2'
// }
// }
},
yAxis: {
type: 'value',
data: [80, 100, 120, 140, 160, 180],
min: 'dataMin',
max: 'dataMax',
axisLabel: {
formatter: '{value}%',
show: true,
textStyle: {
color: '#3b3b3b',
fontFamily: 'MicrosoftYaHei',
fontSize: 12,
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#e2e2e2',
}
},
splitLine: {
lineStyle: {
color: '#f9f9f9',
}
}
},
series: [{
name: '每日客流達(dá)成率',
type: 'line',
itemStyle: {
normal: {
label: {
// show: true
},
color: '#7191b8'
}
},
lineStyle: {
normal: {
// color: 'red'
}
},
connectNulls: true,
smooth: false,
data: [140.33, 119.07, 51.03, 55.28, 63.79, 85.05, 93.55, 153.08, 136.07, 51.03,
55.28, 63.79, 55.28, 59.53, 148.83, 140.33, 46.78, 63.79, 72.29, 63.79,
93.55, 136.07, 161.59, 51.03, 51.03, 59.53, 63.79, 55.28, 148.83, 136.07,
51.03, 55.28, 63.79, 59.53, 68.04, 161.59, 148.83, 51.03, 46.78, 63.79,
68.04, 80.79, 178.60, 161.59, 63.79, 59.53, 68.04, 80.79, 93.55, 174.35,
170.09, 68.04, 63.79, 72.29, 85.05, 102.06, 178.60, 170.09, 68.04, 68.04,
72.29, 89.30, 106.31, 187.10, 174.35, 72.29, 63.79, 72.29, 85.05, 102.06,
195.61, 182.85, 76.54, 68.04, 85.05, 93.55, 110.56, 204.11, 191.36, 80.79,
72.29, 85.05, 97.80, 114.81, 212.62, 204.11, 85.05, 76.54, 93.55, 106.31,
119.07
],
showSymbol: false,
markPoint: {
symbol: 'circle',
symbolSize: 10,
color: 'red',
label: {
normal: {
show: true,
fontSize: 12,
color: '#000',
offset: [0, -15]
}
},
itemStyle: {
normal: {
color: 'red',
}
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
}
}, {
name: '七日均線',
type: 'line',
smooth: false,
itemStyle: {
normal: {
label: {
show: true
},
color: '#e65d4d'
}
},
connectNulls: true,
data: [33, 28, 12, 13, 15, 20, 22, 36, 32, 12, 13, 15, 13, 14, 35, 33, 11, 15, 17,
15, 22, 32, 38, 12, 12, 14, 15, 13, 35, 32, 12, 13, 15, 14, 16, 38, 35, 12,
11, 15, 16, 19, 42, 38, 15, 14, 16, 19, 22, 41, 40, 16, 15, 17, 20, 24, 42,
40, 16, 16, 17, 21, 25, 44, 41, 17, 15, 17, 20, 24, 46, 43, 18, 16, 20, 22,
26, 48, 45, 19, 17, 20, 23, 27, 50, 48, 20, 18, 22, 25, 28
],
markPoint: {
symbol: 'circle',
symbolSize: 10,
color: '#58a',
label: {
normal: {
show: true,
fontSize: 12,
color: 'blue',
offset: [0, -15]
}
},
itemStyle: {
normal: {
color: 'blue',
}
},
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
showSymbol: false,
}]
};
var myChart = echarts.init(document.getElementById('main1'));
myChart.setOption(option1);
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);
echarts.connect([myChart, myChart2]);
