echarts折线图的symbol自定义样式

series: [
        {
          name: '失败任务数',
          type: 'bar',
          yAxisIndex: 0,
          data: failTask,
          showBackground: true, //显示柱条的背景色
          backgroundStyle: {
            color: 'rgba(199, 199, 199, 0.1)',
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,58,255,0)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#23BA65', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          barWidth: 16,
        },
        {
          name: '失败记录数',
          yAxisIndex: 1,
          type: 'line',
          symbol:`image://${lineCircle}`,
          symbolSize:20,
          data: logRecords,
          itemStyle: {
            color: 'rgba(255, 87, 4, 1)',
          },
        },
      ],

import lineCircle from ‘@/assets/newImgs/line-circle.svg’;
引入svg图片
路径写法必须为:symbol:image://${lineCircle}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
function getGzMap(_data) { if (_chinaMap == undefined) { var dom = document.getElementById("container"); _chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } else if (_type == "effectScatter") { window.parent.showMap(); } }) } var option = { backgroundColor: 'rgba(0,0,0,0)', visualMap: { type: 'piecewise', show: false, min: 0, max: 300, splitNumber: 3, itemWidth: 10, itemHeight: 10, itemGap: 5, seriesIndex: [1], pieces: [ { min: 0, max: 100, label: '优' }, { min: 101, max: 200, label: '良' }, { min: 201, max: 300, label: '高风险' } ], //color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄 color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿 textStyle: { color: '#9EA8B1', fontSize: 10 } }, tooltip: { formatter: '{b}' }, geo: { map: 'guangdong', roam: true, aspectScale: 1, zoom: 1.5, layoutCenter: ['55%', '40%'], layoutSize: 500, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', borderColor: '#3BB4DF', shadowColor: '#25A3FC', shadowBlur: 10 }, emphasis: { areaColor: '#ddb926' } } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: unitData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/fire.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, { name: '', type: 'map', geoIndex: 0, mapType: 'guangdong', // 自定义扩展图表类型 label: { normal: { show: true, } }, itemStyle: { normal: { label: { show: true, fontSize: 10, color: '#111' }, shadowColor: '#ddb926', shadowBlur: 5, }, emphasis: { label: { show: true }, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, data: _data }, { type: 'effectScatter', coordinateSystem: 'geo', data: windData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/wind.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, ] }; $.getJSON('../../MapCN/guangdong.json', function(chinaJson) { echarts.registerMap('guangdong', chinaJson); _chinaMap.setOption(option, true); }); }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值