echarts icon indicating copy to clipboard operation
echarts copied to clipboard

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

Open wogaozhixu opened this issue 5 years ago • 5 comments

Version

4.8.0

Reproduction link

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

wogaozhixu avatar Nov 03 '20 10:11 wogaozhixu

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 [email protected]. 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! 🍵

echarts-bot[bot] avatar Nov 03 '20 10:11 echarts-bot[bot]

nobody care this bug?

wogaozhixu avatar Dec 16 '20 06:12 wogaozhixu

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,
            分子公司: "吉林系统集成"
          }
        ]
      }
    }
  ]
});

wogaozhixu avatar Dec 16 '20 06:12 wogaozhixu

示例地址

wogaozhixu avatar Dec 16 '20 06:12 wogaozhixu

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

helgasoft avatar Feb 03 '21 07:02 helgasoft