Echarts 一个图表内显示两个数据展示形式

最新推荐文章于 2024-09-10 15:53:05 发布

陈闷油瓶

最新推荐文章于 2024-09-10 15:53:05 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts javascript 视图设计

本文链接：https://blog.youkuaiyun.com/qq481121/article/details/119103685

option = {
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7']
    },
    yAxis: {},
    series: [
        {
        symbolSize: 10,
        data: [
            ['1', 8.04],
            ['1', 6.95],
            ['1', 7.58],
            ['1', 8.81],
            ['1', 8.33],
            ['2', 7.66],
            ['2', 6.81],
            ['2', 6.33],
            ['2', 8.96],
            ['2', 6],
            ['3', 7.20],
            ['3', 7.20],
            ['3', 4.23],
            ['3', 7.83],
            ['3', 4.47],
            ['3', 3.33],
            ['4', 4.96],
            ['4', 7.24],
            ['4', 6.26],
            ['4', 8.84],
            ['4', 5.82],
            ['5', 5.68],
            ['5', 4.05],
            ['5', 6.03],
            ['5', 2.0],
            ['5', 7.83],
            ['6', 3.33],
            ['6', 4.96],
            ['6', 8.33],
            ['6', 7.66],
            ['6', 4.47],
            ['7', 7.58],
            ['7', 8.81],
            ['7', 7.66],
            ['7', 6.26],
            ['7', 6.03],
        ],
        type: 'scatter',
        markArea: {//设置具体区域的背景颜色，选择不同区间 设置图表对应的背景颜色
        silent: true,
        data: [
          [{
            yAxis:'1',
            itemStyle:{
              color:'#81b22f'
            }
 
          }, {
            yAxis:'2'
          }],[{
            yAxis:'2',
            itemStyle:{
              color:'#505765'
            }
          }, {
            yAxis:'3'
          }],[{
            yAxis:'3',
            itemStyle:{
              color:'#f4b9a9'
            }
          }, {
            yAxis:'4'
          }],[{
            yAxis:'4',
            itemStyle:{
              color:'#a5aeb44f'
            }
          }, {
            yAxis:'5'
          }]
 
        ]
      },
        markLine: { // 样式可以单独设置，也可以一起设置
      symbol: "none",
      silent: true, // 鼠标移上是否有响应（线变粗）
      data: [
        {
          yAxis: "8",
          //type: "min/max/average" // 特殊的标注类型，用于标注最大值最小值等。
          lineStyle: { // 线的样式
            color: "#77D048",
            width: 1,
            opacity: 0.8
          },
          label: { // 文字的样式，默认是白色，有时候文字不显示，可能是颜色的问题
            color: "#77D048",
            formatter:"优秀(350)",
          }
        },
        {
          yAxis: "9",
          lineStyle: { // 线的样式
            color: "#EFCA2A",
            width: 1,
            opacity: 0.8
          },
          label: { // 文字的样式，默认是白色，有时候文字不显示，可能是颜色的问题
            color: "#EFCA2A",
            formatter:"优秀(350)",
          }
        }
      ],
    },
    },
    
  {
    name: '产量',
    data: [8, 6.5, 5.8, 6.6, 4.9, 6.2, 7.3],
    type: 'line',
    itemStyle: {
      normal: {
        lineStyle: {
          width: 2,
        }
      }
    }}]
};