echarts柱状图,折线图样式

    <div style="display:flex;justify-content: space-around;">
      <div id="columnar" style="width: 500px;height:300px;" />
      <div id="brokenLine" style="width: 500px;height:300px;" />
    </div>

var echarts = require('echarts')
require('echarts/lib/chart/line')


drawLine(){
  let _this = this
  const options ={
    title: {
      text: '近7日页面用户访问量',
      left: 'center',
      top:'30',
      textStyle:{    
        fontSize:14,//标题文字大小
      },
    },
    color: ['#39a0ff'],
    xAxis: {
      type: 'category',
      data: _this.sevenKey,
      axisLine:{
        lineStyle:{
          color:'#727273'  //x轴线的颜色
        }
      },
    },
    tooltip : {
      trigger: 'axis',
      axisPointer: {
        type: 'line',//鼠标移入显示竖线
        lineStyle: {//鼠标移入背景图
          color: "#ebf0f9",
          width: 50,
          type: "solid",
        },
        label: {
          backgroundColor: '#39a0ff',//值颜色
        },
        z:0,
      },
      formatter: "{b}<br/><div style='display: flex;align-items: center;'><div style='width: 10px;border-radius: 50%;background: rgb(57, 160, 255);height: 10px;'></div><div>访问量 : {c}</div> </div> "//鼠标移入柱状图显示内容
    },
    yAxis: {
      type: 'value',
      axisLine:{
        lineStyle:{
          color:'#727273'  //y轴线的颜色
        }
      },
      splitLine :{
      lineStyle:{
        type:'dashed'//表格横轴虚线
      },
      show: true, //隐藏
    },
    },
    series: [
      {
        data: _this.sevenVal,
        type: 'bar',
        emphasis: { label: { show: true ,position:'top'} },//鼠标移动到柱状图上显示值
      }
    ]
  }
  const options2 = {
    title: {
      text: '近7日页面用户访问趋势图',
      left: 'center',
      top:'30',
    },
    tooltip : {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        label: {
        backgroundColor: '#39a0ff',
        type:"solid"
        },
        z:0,
      },
      formatter: "{b}<br/><div style='display: flex;align-items: center;'><div style='width: 10px;border-radius: 50%;background: rgb(57, 160, 255);height: 10px;'></div><div>访问量 : {c}</div> </div>"
    },
    color: ['#39a0ff'],
    xAxis: {
      type: 'category',
      data: _this.sevenKey,
      axisLine:{
        lineStyle:{
          color:'#727273'  //x轴线的颜色
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLine:{
        lineStyle:{
          color:'#727273'  //y轴线的颜色
        }
      },
      splitLine :{
      lineStyle:{
          type:'dashed'//表格横轴虚线
      },
      show: true //隐藏
    },
    },
    series: [
      {
        data: _this.sevenVal,
        type: 'line',
      emphasis: { label: { show: true ,position:'top'} },//鼠标移动到柱状图上显示值
      },
    ]
  };
  const myChart = echarts.init(document.getElementById('columnar'))
  const myChart2 = echarts.init(document.getElementById('brokenLine'))
  window.onresize = function() {
    myChart.resize()
    myChart2.resize()
  }
  myChart.setOption(options)
  myChart2.setOption(options2)

},

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-25 18:20:10       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-25 18:20:10       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-25 18:20:10       82 阅读
  4. Python语言-面向对象

    2024-05-25 18:20:10       91 阅读

热门阅读

  1. 520表白html5爱心代码

    2024-05-25 18:20:10       32 阅读
  2. 常见端口号

    2024-05-25 18:20:10       26 阅读
  3. 使用.net core 调用C#WebService的三种方式

    2024-05-25 18:20:10       34 阅读
  4. kafka之consumer参数auto.offset.reset

    2024-05-25 18:20:10       35 阅读
  5. SpringBoot

    2024-05-25 18:20:10       31 阅读
  6. 分账系统说明

    2024-05-25 18:20:10       32 阅读
  7. 探索电子邮件的神奇世界

    2024-05-25 18:20:10       25 阅读
  8. 赶紧收藏!2024 年最常见 20道 Redis面试题(六)

    2024-05-25 18:20:10       37 阅读
  9. Spring的依赖注入

    2024-05-25 18:20:10       33 阅读
  10. JVM-调优之-高内存占用问题排查

    2024-05-25 18:20:10       35 阅读