echarts Graphic doesn't work when I'm using Timeline and dataset

deikduxw  于 5个月前  发布在  Echarts
关注(0)|答案(5)|浏览(58)

Version

4.8.0

https://codepen.io/wogaozhixu/pen/yLJEaZb

Steps to reproduce

The graphic property does not appear to be in effect

What is expected?

make it work!

What is actually happening?

it does not work

1wnzp6jl

1wnzp6jl1#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list .

Have a nice day! 🍵

envsm3lx

envsm3lx2#

nobody care this bug?

u59ebvdq

u59ebvdq3#

var chart_bar = echarts.init(document.getElementsByClassName("chart")[0]);

chart_bar.setOption({
  baseOption: {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      type: "scroll",
      scrollDataIndex: 0,
      orient: "horizontal",
      show: true,
      textStyle: {
        fontSize: 12,
        fontFamily: "微软雅黑",
        fontWeight: null
      }
    },
    grid: {
      containLabel: true,
      left: 20,
      right: 20,
      bottom: 80,
      top: 50
    },
    xAxis: {
      type: "category",
      axisLabel: {
        interval: "auto",
        rotate: 0,
        show: true,
        fontSize: 12,
        fontWeight: null
      },
      axisLine: {
        lineStyle: {
          width: 1
        },
        show: true
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: true,
        fontSize: 12,
        fontWeight: null
      },
      min: null,
      max: null,
      axisLine: {
        lineStyle: {
          width: 1
        },
        show: true
      }
    },
    series: [
      {
        name: "签约额(元)",
        type: "line",
        dimensions: ["分子公司", "签约额(元)"],
        smooth: false,
        smoothMonotone: "default",
        label: {}
      }
    ],
    color: [
      "#4266F2",
      "#17C5D2",
      "#FFB82E",
      "#F9731B",
      "#F04331",
      "#E300A4",
      "#911CF8",
      "#0F19D1"
    ],
    label: {
      show: false,
      showZero: true,
      showMin: false,
      showMax: false
    },
    dataZoom: [
      {
        show: false,
        xAxisIndex: 0,
        height: 15,
        bottom: 90
      }
    ],
    // graphic attribute doesn`t work
    graphic: [
      {
        type: "text",
        rotation: 0,
        left: "center",
        top: 10,
        style: {
          text: "分子公司",
          fill: "#545454",
          font: "14px 微软雅黑"
        }
      },
      {
        type: "text",
        rotation: 1.57,
        left: 0,
        bottom: "center",
        style: {
          text: "签约额(元)",
          fill: "#545454",
          font: "14px 微软雅黑"
        }
      }
    ],
    timeline: {
      show: true,
      autoPlay: true,
      loop: true,
      playInterval: 2000,
      axisType: "category",
      controlPosition: "left",
      rewind: false,
      symbol: "emptyCircle",
      symbolSize: 10,
      orient: "horizontal",
      left: 0,
      right: "auto",
      top: "auto",
      bottom: 20,
      lineStyle: {
        show: true,
        color: "#304654"
      },
      data: [
        {
          value: "双章合同",
          tooltip: {
            show: true,
            formatter: "{b}"
          }
        },
        {
          value: "单章合同",
          tooltip: {
            show: true,
            formatter: "{b}"
          }
        }
      ]
    }
  },
  options: [
    {
      dataset: {
        source: [
          {
            合同状态: "双章合同",
            "签约额(元)": 8980788.75,
            分子公司: "北京系统集成"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 4990600,
            分子公司: "河南系统集成"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 6960337.5,
            分子公司: "朗云产品部"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 1109125,
            分子公司: "分销事业部"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 13357490.5,
            分子公司: "吉林系统集成"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 60613638.46,
            分子公司: "江西系统集成"
          },
          {
            合同状态: "双章合同",
            "签约额(元)": 40731012.5,
            分子公司: "天津系统集成"
          }
        ]
      }
    },
    {
      dataset: {
        source: [
          {
            合同状态: "单章合同",
            "签约额(元)": 6171718.75,
            分子公司: "天津系统集成"
          },
          {
            合同状态: "单章合同",
            "签约额(元)": 1083375,
            分子公司: "辽宁系统集成"
          },
          {
            合同状态: "单章合同",
            "签约额(元)": 967187.5,
            分子公司: "吉林系统集成"
          }
        ]
      }
    }
  ]
});
unftdfkk

unftdfkk5#

See demo - maybe this is what you want ? graphic moved inside options.

相关问题