饼状图--只有一个指标echarts-带面积的折线图echarts柱状图圆角实现echarts中饼状图数据太多进行翻页echarts给每个柱状图配置不同的颜色echarts中x轴文字太长换行的几种方式echarts-中的事件-- demo1.on('事件类型', function (params) {}echarts控制柱状图柱条的宽度在地图上--给经纬度--展示任何一个点可以展示地名echarts 设置legend样式echarts饼状图不要中间的文字提示echasrts定义折线图legend的样式-优化echarts轮训展示某个echarts设置标题样式vue中如何使用echarts,使用axios获取数据echarts更改x和y轴的颜色echarts在左下角添加单位echarts的初始化和销毁dispose多个饼状图echarts第二次渲染不出来的原因echarts中坐标与标签刻度对齐echarts饼图中央自定义文字echarts多条折线图添加单位设置echarts线的样式echarts饼状图自定义legend的样式付费echarts去除坐标轴上的x和y轴国庆总结:echarts自定义颜色主题,保证你看的明明白白echarts饼图的配置 封装组件的注意点echarts之--柱状图-%显示ECharts 简介ECharts 安装ECharts 自定义构建ECharts 创建图表ECharts 图表组成ECharts 文本样式ECharts 区域样式ECharts 事件系统ECharts action 交互ECharts 数据异步加载ECharts 标题组件ECharts 提示框ECharts 图例组件ECharts 工具栏ECharts 数据缩放组件ECharts 极坐标系ECharts 地图坐标系ECharts 折线图ECharts 柱状图ECharts 饼图ECharts 散点图ECharts K 线图

echarts-带面积的折线图

 

测试地址   https://gallery.echartsjs.com/editor.html?c=x6p5SsIEzt


var listN = '高温';
var unit = '°C'; 单位
var timeArray = ["20:00","20:05","20:10","20:15","20:20","20:25","20:30","20:35","20:40","20:45","20:50","20:55","21:00","21:05","21:10","21:15","21:20","21:25","21:30","21:35","21:40","21:45","21:50","21:55","22:00","22:05","22:10","22:15","22:20","22:25","22:30","22:35","22:40","22:45","22:50","22:55","23:00","23:05","23:10","23:15","23:20","23:25","23:30","23:35","23:40","23:45","23:50","23:55","00:00","00:05","00:10","00:15","00:20","00:25","00:30","00:35","00:40","00:45","00:50","00:55","01:00","01:05","01:10","01:15","01:20","01:25","01:30","01:35","01:40","01:45","01:50","01:55","02:00","02:05","02:10","02:15","02:20","02:25","02:30","02:35","02:40","02:45","02:50","02:55","03:00","03:05","03:10","03:15","03:20","03:25","03:30","03:35","03:40","03:45","03:50","03:55","04:00","04:05","04:10","04:15"]; 时间
var dataArray = ["7.2","7.6","7.4","7.1","6.7","6.4","6.3","6.0","6.5","6.8","6.6","5.8","5.5","5.3","5.1","5.2","4.9","4.8","4.4","4.0","3.9","3.5","3.2","2.9","2.5","2.1","1.9","1.8","1.6","1.5","1.4","1.3","1.1","1.0","0.8","0.5","0.4","0.6","0.6"]; data

option = {
     backgroundColor: '#000',背景颜色
     
     title: {
          left: 'center',text: '工作机器人数'标题颜色
          }
     },tooltip: {
        trigger: 'axis'unit),},dataZoom: {
        bottom: '0'数据窗口范围的起始百分比
         end: 30,1)">数据窗口范围的结束百分比
           handleSize: "50%"
            },areaStyle: {
                color: 'rgba(2,194,1)'
            }
        },borderColor: 'rgba(2,0.2)''category'falsetrue横坐标那一条线的颜色
            },axisLabel: {
            textStyle: {
                 color: '#02C2FF',1)">横坐标  字段名的颜色
                 color:"red",
                fontSize: 12横坐标  分割线颜色
            
            }
        },axisLine: {show: '#02C2FF'unit)
        },data:['0','4','8','12','16','20']
    }],series: [{
        name: listN,type: 'line'4'#FFFFFF'
        },areaStyle: { 区域填充样式
            normal: {
                color: new echarts.graphic.LinearGradient(0,1上边区域 
                   { offset: 0.7,0.6)'} 下边的区域
                ],1)">)
            }
        },data: dataArray
    }]
};