option = {

tooltip: {

trigger: ‘axis‘,

axisPointer: {

type: ‘cross‘,

crossStyle: {

color: ‘#999‘

}

}

},

legend: {

data: [‘苹果‘, ‘香蕉‘, ‘橘子‘], // 设置具体项

icon:"rect", // 设置legend图标

bottom:"bottom", //设置legend位置

itemGap:50 //设置legend项之间的间距

},

xAxis: [

{

type: ‘category‘,

data: [‘郑州‘, ‘南阳‘, ‘洛阳‘, ‘信阳‘, ‘新乡‘, ‘开封‘, ‘驻马店‘, ‘商丘‘, ‘许昌‘, ‘周口‘, "济源", ‘濮阳‘],

axisPointer: { //设置x轴指示器样式

type: ‘shadow‘

},

axisTick:{show:false},

axisLine:{

lineStyle:{

width:2

}

}

}

],

yAxis: [

{

type: ‘value‘,

min: 0,

max: 250,

interval: 50,

axisTick:{show:false},

axisLine:{show:false}

},

{

type: ‘value‘,

min: 0,

max:50,

interval: 10,

axisLabel: {

formatter: ‘{value} %‘

},

axisTick:{show:false},

axisLine:{show:false}

}

],

series: [

{

name: ‘苹果‘,

type: ‘line‘,

data: [20., 49, 70, 26, 66, 76, 100, 142, 32, 20, 6, 50],

itemStyle:{

color:"#3fa7dc" //设置折线图颜色

},

smooth:true, // 线条是否平滑

symbol:"none", // 是否显示节点

stack:"总量", //areaStyle颜色重叠问题,添加相同的stack属性即可

areaStyle: {

opacity:0.3

}

},

{

name: ‘香蕉‘,

type: ‘line‘,

stack:"总量",

data: [230, 130, 160, 184, 90, 120, 100, 90, 48, 18, 10, 30],

itemStyle:{

color:"orange" //设置折线图颜色

},

smooth:true,

symbol:"none", // 是否显示节点

areaStyle: {

opacity:0.3

}

},

{

name: ‘橘子‘,

type: ‘line‘,

data: [60, 80, 90, 120, 63, 102, 240, 234, 230, 165, 120, 62],

itemStyle:{

color:"#ff3a00" //设置折线图颜色

},

symbolSize:10, // 设置节点大小

symbol:"circle" // 设置节点样式

}

]

};

设置areaStyle属性后,发现颜色重叠,如果不想重叠,给series的项添加相同的stack属性

原文:https://www.cnblogs.com/yunyin/p/13889794.html

echarts 其他样式 折线 重叠_echarts 折线图 areaStyle颜色重叠问题相关推荐

  1. echarts x和数据对应_echarts 折线图动态x轴及数据

    ECharts // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js. // Step:3 ech ...

  2. echarts做企业关系图谱_echarts交叉关系图一

    想要做一个公司-人员关系图,官网echarts图graph webkit dep 稍微改了一下, 也是有点恶心自己,调了一个数据最多的去改,如果正好有人需要就不用去改了 说明:此图没有坐标,可以设置图 ...

  3. echarts做企业关系图谱_echarts 关系图

    匿名用户 1级 2016-05-14 回答 使用_buildLinkShapes(nodes, links)函数,针对定义的全部线段数据,设置线段的权重(粗细).样式和高亮样式. 1.zrender定 ...

  4. ECharts动态加载数据绘制折线图

    Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤 连接数据接口,动态加载图表 动态加载数据,整体代码 折线图绘制 总结 绘制多个图表的方法 ECharts 纯Javasc ...

  5. echarts制作多个纵轴的折线图

    实现效果: 页面代码如下: <script type="text/javascript"> $(function (){var myChart = echarts.in ...

  6. echarts折线图填充颜色

    Echarts折线图填充颜色 let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {te ...

  7. Echarts 双侧 双表头 柱状图 折线图

    Echarts 双侧 双表头 柱状图 折线图 带箭头 区分颜色 成品图片(如需折线图自行更改) 废话不多say 上代码

  8. Python使用matplotlib函数subplot可视化多个不同颜色的折线图、自定义数据点的形状、自定义折线图的颜色

    Python使用matplotlib函数subplot可视化多个不同颜色的折线图.自定义数据点的形状.自定义折线图的颜色 目录

  9. Flutter自定义系列之折线波动图,心率图,价格走势图

    随着前两篇文章的学习,我今天继续给大家演示下简单的自定义之折线波动图,心率图,价格走势图. 这里,我们创建一个自定义的StatefulWidget,用于显示动态的价格线. 我们将使用CustomPai ...

最新文章

  1. U盘无法拷贝超过4G的大文件
  2. RecyclerView万能分割线
  3. vscode工作区是什么意思_空压机的容积流量和工作压力是什么意思?
  4. 【转】利用python的KMeans和PCA包实现聚类算法
  5. 戴尔电脑开机之后闪黄灯系统不能启动
  6. 图像色彩空间之RGB与HSI
  7. 计算机知识选择题库,计算机基础知识篇选择题库
  8. win7原版系统安装及基本设置
  9. opengl 4.5离线文档下载
  10. 本地计算机的硬件基本配置信息,Windows7系统如何查看硬件的基本配置
  11. wegame显示密保服务器,wegame英雄联盟怎么选定大区
  12. Contextual Parameter Generation for Knowledge Graph Link Prediction
  13. 最近很火的养猫小程序—365赚钱宝小程序源码
  14. Python——自动签到脚本
  15. android room 教程,android room 使用
  16. 中央电大 c语言程序设计a 试题,最新-中央电大2008年秋C语言程序设计A试题1.doc...
  17. Qsetting本地缓存PC端数据
  18. vlookup使用步骤_Excel Vlookup函数的使用方法及实例图解
  19. 前端学习day38day39day40:09-JS基础之各类型常用api
  20. 云画册php,神策指标设计及埋点方案介绍

热门文章

  1. 计算机管理mmc无法,电脑提示mmc无法创建管理单元的问题可以这样解决
  2. nginx的目录结构和配置文件
  3. 傅里叶变换滤波之生物信号滤波(笔记03)
  4. label里面的文字换行_如何在JLabel中自动换行文本?
  5. python中的类的属性是什么_python中类属性和数据属性的解释
  6. js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
  7. 面向对象的重试模式方法
  8. Abp VNext 项目创建简介
  9. 使用Docker支持创建ASP.NET Core应用程序
  10. Headless CMS 的内部