vue中使用echarts

时间:2024-12-19 17:08:46
  • <template>
  • <div>
  • <sss />
  • <div id="main" style="width: 900px;height:400px;"></div>
  • <el-button type="info" @click="$('zhu')">去柱形图</el-button>
  • <el-button type='info' @click="$('bing')">饼状图</el-button>
  • </div>
  • </template>
  • <script>
  • import * as echarts from "echarts";
  • import sss from "./s/s";
  • import _ from "lodash";
  • export default {
  • components: {
  • sss
  • },
  • name: "",
  • data() {
  • return {
  • list: [],
  • options: {
  • title: {
  • text: "用户来源"
  • },
  • tooltip: {
  • trigger: "axis",
  • axisPointer: {
  • type: "cross",
  • label: {
  • backgroundColor: "#E9EEF3"
  • }
  • }
  • },
  • grid: {
  • left: "3%",
  • right: "4%",
  • bottom: "3%",
  • containLabel: true
  • },
  • xAxis: [
  • {
  • boundaryGap: false
  • }
  • ],
  • yAxis: [
  • {
  • type: "value"
  • }
  • ]
  • }
  • };
  • },
  • mounted() {
  • var myChart = (("main"));
  • // 使用刚指定的配置项和数据显示图表。
  • this.$axios("reports/type/1", ).then(res => {
  • (res);
  • if (.status == 200) {
  • = res.data.legend.data;
  • var result = _.merge(res.data, this.options);
  • (result);
  • (result);
  • }
  • });
  • },
  • methods: {},
  • computed: {},
  • watch: {}
  • };
  • </script>
  • <style scoped>
  • </style>