显示效果:
实现步骤:
1.使用Echarts图表
2.绑定数据
3.属性中调整自定义属性
代码内容:
- let color = ['0, 124, 250','0, 254, 210']
- // 创建用于显示动画效果的系列数组
- let news=[]
- option.series.forEach ((s,i)=>{
- let data1 = []
- s.data.forEach((item,index) =>{
- data1.push([option.xAxis.data[index].value,item.value])
- })
- let s1 =
- {
- "name": s.name,
- "data": [{
- "coords": data1,
- }],
- "type": "lines",
- "coordinateSystem": "cartesian2d",
- "zlevel": 1,
- "polyline": true,
- "smooth": true,
- "symbol": "circle",
- "effect":
- {
- "show": true,
- "trailLength": 0.4,
- "symbol": "circle",
- "period": 8,
- "symbolSize": 8
- },
- "lineStyle":
- {
- "normal":
- {
- "color": `rgba(${color[i]},1)`,
- "width": 0,
- "opacity": 0,
- "curveness": 0
- }
- }
- }
- news.push(s1)
- })
- let datas = []
- let cates = []
- let maxNums = [];
- let maxNum = 0;
- option.series[0].data.forEach(item => {
- if (maxNum < item.value) {
- maxNum = item.value;
- }
- datas.push(item.value)
- })
- maxNum*=1.1
- option.xAxis.data.forEach(item => {
- cates.push(item.value)
- maxNums.push(maxNum)
- })
- const _option = {
- grid: {
- top:option.grid.top,
- left: option.grid.left,
- right: option.grid.right,
- bottom:option.grid.bottom+50,
- containLabel: false,
- },
- xAxis: {
- data: cates,
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: option.xAxis.axisLabel.color,
- fontFamily: option.xAxis.axisLabel.fontFamily,
- fontSize: option.xAxis.axisLabel.fontSize,
- fontStyle: option.xAxis.axisLabel.fontStyle,
- fontWeight: option.xAxis.axisLabel.fontWeight,
- textStyle: {
- backgroundColor: '#013443',
- padding: 10,
- borderColor: 'rgba(0, 185, 211, .9)',
- borderWidth: '1',
- },
- },
- },
- yAxis: {
- show: false,
- },
- series: [
- {
- name: '柱图',
- type: 'bar',
- // barWidth: '10%',
- data: maxNums,
- tooltip: {
- show: false,
- },
- barGap: '-50%',
- itemStyle: {
- normal: {
- color: '#013f4b',
- label: {
- show: false, //开启显示
- position: 'top', //在上方显示
- textStyle: {
- //数值样式
- color: 'aqua',
- fontSize: 15,
- }
- },
- },
- },
- },
- {
- name: '外圈点',
- type: 'line',
- showAllSymbol: true,
- symbol: 'circle',
- symbolSize: 25,
- lineStyle: {
- normal: {
- color: '#1766a7',
- shadowColor: 'rgba(9, 64, 96, .9)',
- shadowBlur: 0,
- },
- },
- itemStyle: {
- color: '#083b45',
- borderColor: '#45c9b2',
- borderWidth: 2,
- shadowBlur: 0,
- },
- label: {
- ...option.series[0].label
- },
- tooltip: {
- show: false,
- },
- data: datas,
- },
- {
- name: '内部点',
- type: 'line',
- showAllSymbol: true,
- symbol: 'circle',
- symbolSize: 8,
- lineStyle: {
- normal: {
- color: '#1766a7',
- shadowColor: 'rgba(0, 0, 0, .3)',
- shadowBlur: 0,
- },
- },
- itemStyle: {
- color: '#45c9b2',
- borderWidth: 0,
- shadowBlur: 0,
- },
- tooltip: {
- show: false,
- },
- data: datas,
- }
- ],
- };
- news.forEach(item => {
- _option.series.push(item)
- })
- return _option;
复制代码 运行,浏览效果。
示例案例:
wyn-export-20240204150915.zip
(399.05 KB, 下载次数: 25)
|
|