echarts 配置文件详解

最新推荐文章于 2025-06-21 16:09:48 发布

原创

最新推荐文章于 2025-06-21 16:09:48 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echart #toolbox #tooltip

本文主要探讨了Echarts从2.0到3.0版本中配置的变化，特别是针对新手在使用Echarts折线图时需要注意的配置细节。内容包括js中chart的配置信息及实际展示效果，虽然不全面，但期望能为初学者提供一定的指导。

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

本人新手，最近在研究echarts折线图时，发现了echart2.0版本和3.0版本中有很多属性改变了，配置echarts时就得按最新版本来配置下面是配置的一些需要注意的地方。

1、js中chart的配置信息：

var chart= {
    title: {          //标题，每个图表最多仅有一个标题控件
        text: title,  //主标题文本，
        x: 'center',  //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        textStyle: {  //主标题文本样式
            fontSize: 15
        }
    },
    lineStyle: {      //echart主配置中没有这个属性，而且改变width没有变化
        width: 1
    },
    legend: {         //图例，每个图表最多仅有一个图例，混搭图表共享，同温湿度传感器右侧的图例相同，点击时数据隐藏
        show: false,
        orient: 'vertical',
        x: 'right',
        y: 'center',
        data: [location]
    },
    toolbox: {    //则线图右上角的工具箱
        show: true,  //是否显示工具箱

        feature: {   //工具箱标志
            mark: {
  
  show: true},  //辅助线标志；3.0版本取消该属性
            dataZoom: {  //框选区域缩放
                show: true,
                iconStyle: {  //3.0版本新出属性，用于修改icon样式，也可进行自定义操作
                    normal: {
                        borderColor: "green"
                    }
                }
            },
            dataView: {
  
  show