echart百度图表使用方法

最新推荐文章于 2026-05-28 15:41:18 发布

原创最新推荐文章于 2026-05-28 15:41:18 发布 · 置顶 · 5.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何使用ECharts进行数据可视化。相较于Highcharts，ECharts因其开源和详细的配置文档而更受欢迎。创建HTML文档并引入echarts.min.js后，通过require.config设置本地ECharts路径，然后配置echarts实例和所需图表类型。在初始化图表时，重点在于option对象的设置，包括坐标轴、数据等。为了解决数据断开和数值显示问题，可以在series的label中添加formatter方法，并在axisLabel中设置超过1000的数值以千为单位显示。

最近几个项目都是有关图表，在国内echart和国外highchart比较，还是比较倾向于使用echart做可视化，echart是完全开源，配置项文档非常详细。

创建html文档，设置好DOM，给节点设置width和height

步骤1

引入echart.min.js文件

步骤2

配置echarts和折线图

步骤3

（1）require.config是用来设置echarts的配置文件，配置好本地echarts文件路径。（2）关于第二个require，这里是用来设置要表。除了第一个‘echarts’必要引用外，还要引用所需要显示的图。例如，我们这个表用到的是柱状图，所以要引用bar，那么如果我们要引用折线图，那么就要引用line了，依次类推，具体可以看官方文档。

对获取得到的id进行echarts初始化

步骤4

重点是option里的设置，设置坐标轴、设置数据。

步骤5

数据显示有断开，在series中label加上formatter方法

步骤6

y轴上的超过1000，显示千。在axisLabel中增加formatter方法

步骤7

var options = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
            bottom:'20',
            data: ['2的指数', '3的指数','1/2的指数']
        },
        xAxis: {
            splitLine: {show: false},
            axisLabel:{
                color:'#333',
                fontSize:12,
            },
            axisTick:{
                show:false
            },
            data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
        },
        grid: {
            x:0,
            x2:0,
            y:20,
            y2:0,
            bottom: '25%',
            containLabel: true
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                color:'#333',
                fontSize:12,
                formatter: function(val){
                    return calc(val)
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{show:true}
        },
        series: [
            {
                name: '3的指数',
                type: 'line',
                label:{
                    formatter:function(params){
                        if (params.value > 0) {
                            return params.value
                        }else{
                            return '';
                        }
                    }
                },
                data: [1, 3, 9, 27, 81, 247, 741, , 6669]
            },
            {
                name: '2的指数',
                type: 'line',
                data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
            },
            {
                name: '1/2的指数',
                type: 'line',
                data: [2, 4, 8, 16, 32, 64, 128, 256, 512]
            }
        ]
    };


    platLineData.setOption(options);

最终可视化