The avatar for @shihenghe
shihenghe
Public
Edited
Dec 22, 2023
2 forks
Insert cell
Insert cell
main = html`<div style="position: relative; height:100%">
<div class='dim-select'
style='position:absolute;
z-index:2;
right: 10% ;
background: #fff;
box-shadow: 4px 7px 8px #eee;
border: 1px solid #eee;'
>
${selectInput}
${isShowSelect ? search:''}
${isShowSelect ? dimList : []}
${isShowSelect ? allCheckBox(): ''}
</div>
<div class='dims-chart'style="height: 100% ;min-height:400px; width:100%"></div>
</div>`
Insert cell
mutable noChooseDims =_.filter(legend,d=>!_.includes(chooseDims,d))
Insert cell
import {form} from "@mbostock/form-input"
Insert cell
Insert cell
search.addEventListener("change", (e) =>{
const value = e.target.value ||''
const next = _.filter(_.keys(_.groupBy(finalDat, 'mergedDim')),l=>_.includes(l,value))
const next1 = _.filter(_.keys(_.groupBy(finalDat, 'mergedDim')),l=>!_.includes(l,value))
mutable legend = next
mutable noChooseDims = next
mutable chooseDims = next1
})
Insert cell

selectInput = html`<input style='height: 20px ;
line-height: 40px;
width:400px;
text-align: center;'
placeholder= '维度筛选'
/>`

Insert cell
mutable isShowSelect =false
Insert cell
//筛选结果栏 输入框获取焦点事件
selectInput.onclick = () => {
mutable isShowSelect = !isShowSelect

}
Insert cell
// 维度栏
dimList = html`<ul class='dims-list' style='list-style: none; padding: 0; height: 200px;max-width:400px; overflow: auto; border-bottom: 1px solid #eee;'>
${_.map(legend,len=>{
const color = _.includes(chooseDims,len)?'#fff':'#e6f7ff';
return `<li style='cursor: pointer;background: ${color}; margin:5px 0; padding: 0 5px;'>${len} </li>`
})}
</ul>`
Insert cell
checkbox = html`<div class='allCheck' style='display: flex ; align-items: center;'><input ${noChooseDims.length===legend.length?'checked':''} type='checkbox' />全选</div>`
Insert cell
allCheckBox = ()=>{
return html`<div style='display: flex; padding : 0 5px ;'>${checkbox}<div style='margin-left: 24px;'>${noChooseDims.length}/${legend.length}</div></div>`
}
Insert cell
checkbox.onchange = () =>{
//当前选中的，就把选中的清空，反之
mutable noChooseDims =!_.isEmpty(noChooseDims)? [] : _.filter(legend,d=>!_.includes(chooseDims,d))
mutable chooseDims =!_.isEmpty(chooseDims)? [] : _.filter(legend,d=>!_.includes(chooseDims,d))
}

Insert cell
mutable chooseDims = []
Insert cell
dimList.onclick = (e)=> {
const val = e.target.innerText
mutable chooseDims = _.includes(chooseDims, val) ? _.filter(chooseDims, s => s !== val) : [...chooseDims, val]
}
Insert cell
groupedData = _.groupBy(_.filter(finalDat,d=>_.includes(noChooseDims,d.mergedDim)), 'mergedDim');
Insert cell
mutable legend = _.keys(_.groupBy(finalDat, 'mergedDim'))
Insert cell
// 2021.12.10 二维折线图1（标注最大值最小值）
// 单指标；2个维度（时间维度 + 其他维度合并一维）；源数据保留2位小数；
Insert cell
dimensions = ["time", "TLJ", "province", "city"]
Insert cell
finalDim = [_.first(dimensions), "mergedDim"]
Insert cell
metrics = ['count']
Insert cell
Insert cell
Insert cell
translationDict = ({})
Insert cell
Insert cell
metricFormatterFn = metricsFormatDict[metrics[0]]
Insert cell
Insert cell
option = {
let [timeDim, mergedDim] = finalDim;
let [metric] = metrics;
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: echartsLikeTooltipFormatter
},
// legend: {
// type: 'scroll'
// },
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: _.uniq((data || []).map((d) => d[timeDim])),
//data: (data || []).map((d) => dimensions.map(dim => _.trim(d[dim])).join('-')),
//axisLabel: { rotate: 30 },
axisTick: { alignWithLabel: true },
axisLine: { onZero: false }
},
yAxis: {
type: "value",
boundaryGap: [0, 0.01],
scale: true //非0
},
color: [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
series: [
..._.map(groupedData, (arr, group) => {
return {
name: group,
type: "line",
symbol: 'circle',
data: arr.map((d) => _.round(d[metric], 2)),
markPoint: {
data: [
{ type: "max", name: "Max" },
{ type: "min", name: "Min" }
],
label:{
formatter: params => {
return metricFormatterFn(params.value)
}
}
}
};
})
]
};
}
Insert cell
chartInst = echarts.init(main.querySelector('.dims-chart'))
Insert cell
chartInst.setOption(option, { notMerge: true, lazyUpdate: true })
Insert cell
(width, chartInst.resize()) // 自适应宽度
Insert cell
echarts = window.echarts || require("https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js")
Insert cell
_ = window._ || require("lodash")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more