echart的进阶使用(option)
echart的option進階使用
1.title: {
text: '折線圖堆疊'subtext: '有一定誤差',left: 'center' }title用來配置標題
subtext:副標題
left:位置
2.tooltip: {
trigger: 'axis' }圖標的提示框組件
trigger(觸發方式):axis(坐標軸) item(數據項)
3.legend: {
data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎'] }圖例組件
4.toolbox: {
feature: {saveAsImage: {}} }工具箱組件(將圖表另存為一張圖片)
5.grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
}
控制圖標大小
方向:百分數是距離那個邊緣的距離
cotainLabel:true(顯示刻度)flase(不顯示刻度)
6.xAxis: {
type: ‘category’,
boundaryGap: false,
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]
},
yAxis: {
type: ‘value’
}
type(坐標軸類型):category(類目軸)? ? ? value(數值軸)
boundaryGap:false(和坐標軸無縫隙) true(有縫隙)(這個好像不太對,待更新,歡迎大佬指正)</
7.series: [
{
name: ‘郵件營銷’,
type: ‘line’, //顯示形式
stack: ‘總量’, //數據堆疊(為了讓折線不重疊,值會疊加) 刪掉就不會堆疊了
? data: [120, 132, 101, 134, 90, 230, 210]
? },
? {
? name: ‘聯盟廣告’, //series如果有name值,legend里的data可以刪掉
? type: ‘line’,
? stack: ‘總量’,
? data: [220, 182, 191, 234, 290, 330, 310]
? }
? ]
8.color:[‘pink’,‘green’,‘skyblue’,‘pink’],
//顏色配置
總結
以上是生活随笔為你收集整理的echart的进阶使用(option)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux查看tongweb端口,东方通
- 下一篇: mysql 案例 ~ pt修复工具的使用