echarts 配置文件详解

本文主要探讨了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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值