echarts样式设置笔记

最新推荐文章于 2024-03-22 17:55:09 发布

weixin_45907672

最新推荐文章于 2024-03-22 17:55:09 发布

阅读量729

点赞数

分类专栏： vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45907672/article/details/127933084

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

设置x轴的小标题

xAxis: {
            type: 'value',
            name: 'DRGs组数',
            data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020']
          }

设置y轴的小标题

yAxis: [
            {
              type: 'value',
              name: '预算总额',
              min: 0,
              max: 25,
              interval: 5,
              //可以添加单位和后缀
              // axisLabel: {
              //   formatter: '{value} ml'
              // }
            },
            {
              type: 'value',
              name: '费率',
              min: 0,
              max: 15,
              interval: 5,
              //可以添加单位和后缀
              // axisLabel: {
              //   formatter: '{value} °C'
              // }
            }
          ],

在option中设置标题，

var option = {
          //标题
          title: {
            text: "区域医疗服务能力示意图",
            left: '45%',
            top: '10px',
            textStyle: {    // 标题样式
              // color: 'red',    //字体颜色
              fontSize: 16,    //字体大小
              fontWeight: 400,    //字体粗细
              lineHeight: '20',    //字体行高
            },
          },

          //鼠标移到折线节点弹框提示x,y轴的值。
          tooltip: {
            trigger: 'axis'
          },

          // 高亮样式。
          emphasis: {
            itemStyle: {
              // 高亮时点的颜色
              color: 'red'
            }
          },

          //获取数据集,赋值
          xAxis: {
            type: 'value',
            name: 'DRGs组数',
          },
          yAxis: {
            type: 'value',
            name: 'CMI值',
          },
          series: [
            {
              symbolSize: 20,
              data: ydata,
              type: 'scatter'
            }]
        };