echarts显示面积图代码

本文介绍了一种使用React和ECharts实现的双Y轴平滑曲线图绘制方法,包括图表配置项详解,如数据源、网格布局、图例、提示框、工具箱等功能,并展示了如何通过代码动态更新图表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图:
在这里插入图片描述

import React,{ Component } from 'react'
var echarts = require('echarts');
var myChart ;
class SmoothLineChart extends Component{
  constructor(props){
    super(props)
    this.state = {
        option : {// 指定图表的配置项和数据
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                type: 'plain', 
                orient: 'vertical',
                icon:"square",
                right: 'right',
                bottom: 'center',
                data:['订单数','消费额'],
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {//网格距离上下左右的边距
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisTick: {show:false},//是否展示标记点
                    axisLine: {show:false},//是否展示线
                    data : ["5-10", "5-11", "5-12", "5-13", "5-14", "5-15", "5-16", "5-17"]
                }
            ],
            yAxis : [
                {
                    name:"消费额(元)",
                    type : 'value',
                    axisLabel : {
                        formatter: '{value}'
                    },
                    splitLine: {show: true},//是否展示横线
                    axisLine: {show:false},
                    axisTick: {show:false},
                    scale:true,/*按比例显示还是重0坐标开始*/
                },
                {
                    name:"订单数",
                    type : 'value',
                    axisLabel : {
                        formatter: '{value}'
                    },
                    splitLine: {show: true},
                    axisLine: {show:false},
                    axisTick: {show:false},
                    scale:true,
                }
            ],
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            series : [
                {
                    name:'订单数',
                    type:'line',
                    stack: '总量',
                    areaStyle: {},//是否显示范围背景色
                    yAxisIndex: 1,/*y轴*/
                    smooth: true,//是折线还是曲线
                    itemStyle: {  //设置范围背景色的样式
                        normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: "rgba(83,174,255,0.29)",  //背景渐变色 
                            lineStyle: {        // 系列级个性化折线样式  
                                width: 2,  
                                type: 'solid',  
                                color: "rgba(94,124,234,1)"
                            }
                        },  
                    },//线条样式  
                    data:[39, 73, 200, 108, 75, 72, 60, 140]
                },
                {
                    name:'消费额',
                    type:'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    yAxisIndex: 0,/*y轴*/
                    smooth: true,
                    itemStyle: {  
                        normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: "rgba(165,121,255,0.5)",  //背景渐变色 
                            lineStyle: {        // 系列级个性化折线样式  
                                width: 2,  
                                type: 'solid',  
                                color: "rgba(165,121,255,1)"
                            }
                        },  
                    },//线条样式  
                    data: [180, 450,100, 200, 320, 700, 430, 500]
                }
            ]
        }
    }
  }
  componentDidMount(){
    myChart = echarts.init(document.getElementById('myChart'))
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.state.option);
  }
  render(){
    return (
      <div className="smoothLineChartCmp">
        <div id="myChart"></div>
      </div>
    )
  }
}

export default SmoothLineChart

### ECharts 折线面积图使用教程 #### 配置基本图表选项 创建一个简单的折线面积图需要先引入ECharts库并初始化实例对象。之后通过`option`属性来配置图表的具体样式和数据。 ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line', areaStyle: {} // 启用区域填充 }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 此代码片段展示了如何启用区域填充以形成面积图的效果[^1]。 #### 定制提示框(Tooltip) 为了提供更好的用户体验,可以自定义tooltip的内容格式化器,从而控制当用户悬停于某个数据点上时所展示的信息: ```javascript tooltip: { trigger: 'axis', padding: 0, formatter: function (params) { let result = '<div style="padding:5px;">'; params.forEach(function(item){ result += `<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color};"></span>${item.seriesName} : ${item.value}</p>`; }); result += '</div>'; return result; } } ``` 上述JavaScript代码实现了对默认tooltip样式的修改,并利用HTML标签构建了一个更加美观且信息丰富的悬浮窗口[^2]。 #### 渐变颜色应用 对于希望给面积部分增加视觉吸引力的情况来说,在series中加入渐变色设置是一个不错的选择: ```javascript series: [{ ... areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#ff0000'}, {offset: 1, color: '#ffffff'} ]) } }] ``` 这段脚本说明了怎样为面积图添加从红色到白色的垂直方向上的线性渐变效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值