echarts+vue绘制柱状图、饼状图和散点图并配置

VIP文章不禾几青年

已于 2022-06-24 17:33:44 修改

阅读量1.2k

点赞数 2

文章标签： echarts vue.js 前端 javascript

于 2022-06-24 09:11:21 首次发布

本文链接：https://blog.csdn.net/opoqou/article/details/125431878

版权

初学echarts做的vue小demo，绘制的柱状图、饼状图和散点图

柱状图

<template>
  <div class="Histogram">
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  data(){
    return{}
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      let option = {
        color: ['#c23531','#2f4554', '#61a0a8'], //修改柱状图柱子的颜色
        title: {
          text: "年度最受大众喜欢美食",
        },
        tooltip: {},
        legend: {}, //对图例朝向的配置，默认是水平显示
        dataset: {
          source: [
            ["product", "2019", "2020", "2021"],
            ["麻辣烫", 43.3, 85.8, 93.7],
            ["螺蛳粉", 83.1, 73.4, 55.1],
            ["烤肉", 86.4, 65.2, 82.5],
            ["火锅", 72.4, 53.9, 39.1],
          ],
        },
        //坐标x轴配置项
        xAxis: {
          type: "category",
          axisLine: {
            show: false, // 隐藏x轴轴线
          },
          axisTick: {
            show: true, // 隐藏坐标轴的刻度线
            // alignWithLabel: true, // 图形于标题居中
            inside: true, // 刻度线是指向内部
            length: 5, // x轴上指向标题刻度线的长度
          },
          axisLabel: {
            textStyle: {
            color: "rgba(60,179,113)", // 坐标轴文字颜色
            fontSize: 10, // 坐标轴文字大小
            },
          },
        },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.set