用eChart画图表

有没有朋友知道前端这种图用eChart咋画啊,找了半天也没找到能对上的例图[流泪]

柱图、折线？

option = {
  grid: {
    show: true,
    borderColor: '#000',
    z: 2
  },
  xAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: true
    },
    max: 0.04,
    min: -0.04
  },
  yAxis: {
    type: 'category',
    splitLine: {
      show: true
    },
    axisTick: {
      show: true,
    },
    axisLine: {
      show: false,
      onZero: false
    },
    data: ['f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12'],
    boundaryGap: false
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0],
      type: 'line',
      label: {
        show: true,
        position: 'right'
      }
    }
  ]
};

折线图

不知道你这个问题是否已经解决, 如果还没有解决的话:

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7519693
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：echart 折线图去掉折线上面的小圆点

除此之外, 这篇博客: 使用Echart绘制小程序图表碰到的一个问题以及解决方式中的 关键代码（二） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

yAxis: [
        {
          type: 'category',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            formatter: (value) => {
              value = value.slice(0, 10)
              return value;
            },
          },
          data: this.state.yData
        }
      ],

您还可以看一下 CSDN就业班老师的【数据分析-随到随学】数据可视化课程中的 01可视化Echart介绍小节, 巩固相关知识点
以下回答来自chatgpt:
问题解答
问题内容：
大家好！我正在学习前端开发，想使用eChart来绘制图表。不过我找了很久也没找到合适的例图。请问有谁能够分享一下使用eChart绘制前端图表的经验吗？非常感谢！
根据你提供的参考资料，以下是使用eChart绘制前端图表的经验：
1. 首先，你需要在HTML文件中引入eChart的相关文件，如下所示：
```

<script type="text/javascript" src="js/echarts.min.js"></script>

<script type="text/javascript" src="js/china.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>
```
1. 在JavaScript代码中，你需要创建一个DOM元素来显示图表，并初始化eChart实例，如下所示：
```
// 创建一个DOM元素来显示图表
var chartDom = document.getElementById('chart');

// 初始化eChart实例
var myChart = echarts.init(chartDom);
```
1. 接下来，你可以配置图表的相关选项，如标题、图例、X轴和Y轴等，具体的配置选项可以参考eChart的官方文档，如下所示：
```
// 配置选项
var option = {
    title: {
        text: '示例图表'
    },
    legend: {},
    xAxis: {},
    yAxis: {},
    series: []
};

// 使用配置选项生成图表
myChart.setOption(option);
```
1. 然后，你可以给图表添加数据，例如添加一个柱状图系列，如下所示：
```
// 添加柱状图系列
option.series.push({
    type: 'bar',
    data: [10, 20, 30, 40, 50]
});

// 使用更新后的配置选项重新渲染图表
myChart.setOption(option);
```
1. 最后，你需要在页面加载完成后调用图表的resize方法，以便图表可以自适应屏幕大小，如下所示：
```
// 页面加载完成后调用resize方法
window.onload = function() {
    myChart.resize();
};
```
通过以上步骤，你就可以使用eChart绘制前端图表了。当然，具体的图表类型、数据和样式可以根据你的需求进行调整和定制化。希望这些经验对你有所帮助！如果你有更具体的问题或需求，欢迎继续询问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

用eChart画图表

问题解答

问题内容：