echarts常用配置-柱状图

最新推荐文章于 2024-07-09 17:50:54 发布

继续继续努力

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量327

点赞数 7

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_38578293/article/details/136366062

版权

npm install echarts

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例',
    left: 'center', // 标题居中
  },
  grid: {
    left: '0', // grid 组件离容器左侧的距离
    right: '0',
    bottom: '0',
    // top: '15%',
    containLabel: true // grid 区域是否包含坐标轴的刻度标签
  },
    tooltip: {
      trigger: 'axis', // 触发类型
      axisPointer: {  
        type: 'shadow' // 可以设置轴指示器的类型为阴影，以突出显示当前位置的数据  
      },
      formatter: function (params, ticket, callback) {
        if (params.componentSubType === 'bar') {
          const html = `<div>
                          <div>${params.seriesName}</div>
                          <div></div>
                          <div><span style="width:10px;height:10px;border-radius: 5px;display: inline-block;background:${params.color}"></span> ${params.name}: ${params.value}</div>
                        </div>`;
          return html;
        }
        return ''
  },
  xAxis: {
    name: 'x',
    nameLocation: 'center', // 坐标轴名称显示位置 start middle/center end
    nameGap: 20, // 坐标轴名称与轴线之间的距离
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    name: 'y轴名称',
    nameTextStyle: {}, // 坐标轴名称的文字样式
    axisLine: {
      show: true, // 是否显示坐标轴轴线
    },
    axisTick: {
      show: true, // 是否显示坐标轴刻度
    },
    splitLine: {
      show: true, // 坐标轴在 grid 区域中的分隔线
      lineStyle: {
         type: 'solid', // 线的类型 solid dashed dotted
      }
    },
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      barWidth: '20%', // 柱子宽度
    }
  ]
});