echart 参数配置

let option = {

                color: ["#07BFE4", "#39FFAB", "#6C00FF",],   //图例颜色

                tooltip: { //  鼠标放上去 提示框显示横坐标的数据

                    trigger: "axis",

                },

                legend: [  // 图例可以为数组 或者 对象

                           

                          {

                            icon: "roundRect",  // 图例的形状

                            left: "right", // 图例的左右位置

                            top: "bottom",  // 图例的上下位置

                            data: [], // 图例的数据内容    和  serise  中的name  一一对应

                            textStyle: {  // 图例文字样式设置

                                color: "#fff",  // 图例文字颜色

                            },

                            itemWidth: 6,  // 图例图形 宽度

                            itemHeight: 15, // 图例图形 高度

                            itemGap: 15, // 图例之间的间距

                        }

                ],

                

                grid: { // 图表位置定位

                    top: "20%",

                    left: "0%",

                    right: "0%",

                    bottom: "0%",

                    containLabel: true, // 定位区域是否包含刻度标签

                },

                xAxis: {

                    type: "category",

                    boundaryGap: ["1", "1"],

                    data: [],

                    axisTick: {  x坐标轴 刻度 设置

                        color: "#017BB1",

                        lineStyle: {

                            width: 0,

                        },

                    },

                    axisLine: { x坐标轴 轴线 设置

                        lineStyle: {

                            color: "#017BB1", //更改坐标轴颜色

                        },

                    },

                },

                yAxis: [{

                    type: "value",

                    axisLine: {

                        lineStyle: {

                            color: "#017BB1", //更改坐标轴颜色

                        },

                        axisLabel: {

                            textStyle: {

                                fontSize: 12,

                                color: "#07DBFF",

                            },

                        },

                    },

                    splitLine: { y 轴 网格线 设置

                        lineStyle: {

                            color: "#017BB1",

                            type: "dashed", //设置网格线类型 dotted:虚线   solid:实线

                        },

                        show: true, //隐藏或显示

                    },

                },],

                series: [

                       {

                            name: ,  //名字与图例对应

                            type: "line",

                            data: [],  //数据的数组

                            showSymbol: true,  // 是否显示线上的圆点

                            symbol: 'circle',     //设定为实心点

                            symbolSize: 10,   //设定实心点的大小

                            areaStyle: [  // 区域填充颜色

                                    color: {

                                          type: "linear",

                                          x: 0,

                                          y: 0,

                                          x2: 0,

                                          y2: 1,

                                   colorStops: [

                                           {

                                               offset: 0,

                                               color: item + "80", // 0% 处的颜色

                                            },

                                         {

                                                  offset: 1,

                                                 color: "#00000000", // 100% 处的颜色

                                       },

                                  ],

                                },

                            ],

                            lineStyle: {

                                color: [],  // 线的颜色

                            },

                            yAxisIndex: 0 // 坐标轴下标 多个y坐标轴时使用

                        }

                ],

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓_枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值