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)

},

要在 Echarts 柱状图上显示折线,可以通过使用 Echarts 的组合图表来实现。具体步骤如下: 1. 首先,确保你已经引入了 EchartsJavaScript 文件。 2. 创建一个包含柱状图折线图的容器元素,例如一个 `<div>` 元素。 3. 使用 Echarts 的 `echarts.init` 方法初始化图表,并将容器元素传递给该方法。 4. 定义柱状图的配置项,包括数据、样式等。 5. 定义折线图的配置项,包括数据、样式等。 6. 将柱状图折线图的配置项分别传递给 `echarts.init` 方法创建的实例。 7. 使用 `setOption` 方法将柱状图折线图的配置项设置到图表中。 示例代码如下所示: ```javascript // 创建图表容器 var chartContainer = document.getElementById('chart'); // 初始化图表 var chart = echarts.init(chartContainer); // 定义柱状图配置项 var barOption = { // 柱状图数据 series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; // 定义折线图配置项 var lineOption = { // 折线图数据 series: [{ type: 'line', data: [5, 10, 15, 20, 25] }] }; // 设置柱状图折线图的配置项 chart.setOption(barOption); chart.setOption(lineOption); ``` 可以根据自己的需求调整柱状图折线图样式、数据等。记得在 HTML 中创建一个容器元素,并给它一个唯一的 ID,然后将该 ID 传递给 `document.getElementById` 方法来获取容器元素的引用。 注意:以上代码仅为示例,实际开发中可能需要根据实际情况进行适当的修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值