ThingStudio森工厂开发者社区

发帖
分享
查看: 3952|回复: 0

[分享] quickchart中的echarts图表如何修改样式

[复制链接]

quickchart中的echarts图表如何修改样式

发表于 2023-3-13 17:05:52 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon3952 zzr_icon0 查看全部
quickchart中的echarts图表如何修改样式

以该图左下方的图表为例，进行修改
（1）获取到对应的dom元素
quickchart中的echarts图表如何修改样式
编辑环境下拿到对应的组件名之后即可通过代码获取
  1.   var dom = $('div[data-v-alias=right01_item06_echarts01]div div')[0]
复制代码
（2）将修改的options样式拿到，可在此进行编辑修改
quickchart中的echarts图表如何修改样式
（3）引入echarts，将刚刚修改好的options粘贴到代码中，获取dom元素修改echarts图表样式
//这里引入的是官方资源，也可以自行下载资源上传引入
quickchart中的echarts图表如何修改样式
  1. var dom = $('div[data-v-alias=right01_item06_echarts01]div div')[0]
  2.     // echarts 初始化
  3.     var bottomCharts = window.echarts.init(dom);
  4.     option = {
  5.         tooltip: {
  6.             trigger: 'axis',
  7.             axisPointer: {
  8.                 type: 'shadow'
  9.             },
  10.             backgroundColor: 'rgba(233, 24, 48, 0.5)',
  11.             borderColor: 'rgba(233, 253, 238, 0.4)',
  12.             textStyle: {
  13.                 color: '#CFE3FC',
  14.             },
  15.             borderWidth: 1
  16.         },
  17.         grid: {
  18.             left: '10px',
  19.             right: '10px',
  20.             top: '20px',
  21.             bottom: '1px',
  22.             containLabel: true
  23.         },
  24.         toolbox: {
  25.             show: true,
  26.             orient: 'vertical',
  27.             x: 'right',
  28.             y: 'bottom'
  29.         },
  30.         xAxis: [
  31.             {
  32.                 type: 'category',
  33.                 boundaryGap: true,
  34.                 axisTick: {
  35.                     show: false
  36.                 },
  37.                 data: ['A厂区', 'B厂区', 'C厂区', 'D厂区', '1区'],
  38.                 axisLine: {
  39.                     show: true,
  40.                     lineStyle: {
  41.                         color: 'rgba(255,255,255, 1)',
  42.                         opacity: 0.2
  43.                     }
  44.                 },
  45.                 // axisLabel: {
  46.                 //   interval: 0,
  47.                 //   color: 'rgba(255,255,255, 1)',
  48.                 //   fontSize: 11,

  50.                 // }
  51.                 axisLabel: { //  改变x轴字体颜色和大小
  52.                     margin: 6,
  53.                     textStyle: {
  54.                         color: "rgba(255,255,255,1)",
  55.                         fontSize: 11,
  56.                         fontFamily: '青春体',

  58.                     }
  59.                 }
  60.             }
  61.         ],
  62.         yAxis: [
  63.             {
  64.                 type: 'value',
  65.                 axisTick: {
  66.                     show: false
  67.                 },
  68.                 splitNumber: 5,
  69.                 axisLine: {
  70.                     show: true,
  71.                     lineStyle: {
  72.                         color: 'rgba(255,255,255, 0.2)',
  73.                     },
  74.                     //   symbol: ['none', 'arrow'],
  75.                     //   symbolSize: [5, 12],
  76.                     //   symbolOffset: [0, 10]
  77.                 },
  78.                 axisLabel: {
  79.                     interval: 0,
  80.                     color: 'rgba(255,255,255, 1)',
  81.                     fontSize: 9
  82.                 },
  83.                 splitLine: {
  84.                     show: false,
  85.                     lineStyle: {
  86.                         type: 'solid',
  87.                         color: 'rgba(255,255,255, 0.3)',
  88.                         width: 1,
  89.                     }
  90.                 }
  91.             }
  92.         ],
  93.         series: [
  94.             {
  95.                 type: 'bar',
  96.                 yAxisIndex: 0,
  97.                 name: '污水排放量',
  98.                 itemStyle: {
  99.                     normal: {
  100.                         color: new echarts.graphic.LinearGradient(
  101.                             0,
  102.                             0,
  103.                             0,
  104.                             1,
  105.                             [
  106.                                 {
  107.                                     offset: 0,
  108.                                     color: 'rgba(222,199,255, 1)'
  109.                                 },
  110.                                 {
  111.                                     offset: 1,
  112.                                     color: 'rgba(233,199,255, 0)'
  113.                                 }
  114.                             ],
  115.                             false
  116.                         )
  117.                     }
  118.                 },
  119.                 barWidth: 10,
  120.                 barGap: 1,
  121.                 data: [50, 40, 25, 22, 37, 29],
  122.                 label: {
  123.                     normal: {
  124.                         show: true,
  125.                         position: "top",
  126.                         textStyle: {
  127.                             color: 'rgba(0,241,255,1)',
  128.                             fontSize: 14,
  129.                             fontFamily: '青春体',
  130.                             //   padding: [0, 0, 0, 0],
  131.                         },
  132.                     },
  133.                 },
  134.             }
  135.         ]
  136.     }
  137.     bottomCharts.setOption(option);
复制代码
（4）查看修改后效果
quickchart中的echarts图表如何修改样式

物联网, 数字孪生城市, 可视化, ThingJS, 三维

相关帖子
回复

举报

avatar
游客~
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

avatar
夏天骑冷月

中级会员

  • 主题

    29

  • 帖子

    37

  • 粉丝

    0

关注 发私信
Ta的新帖
130700ppkpl8x3t7tt1b1t

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4