The avatar for @shihenghe
shihenghe
Public
Edited
Jan 26, 2024
Fork of 二维折线图（非0，标记，0°），单位
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

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more