初学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.setOption(