eartch可视化图标简单制作

最新推荐文章于 2023-11-24 11:14:24 发布

郭靖8

最新推荐文章于 2023-11-24 11:14:24 发布

阅读量223

点赞数

分类专栏：项目笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_69892545/article/details/128403186

版权

项目笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.下载 "echarts": "^5.4.1",

2.按需导入echarts 文件并挂载在main.js中

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart,PieChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
} from "echarts/components";
 
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
  PieChart,
  LegendComponent,
]);
 
// 导出
export default echarts;

import echarts from "./pluging/echarts";
// 挂载到vue实例中
Vue.prototype.$echarts = echarts

3.在需要的页面

一.定义一个容器：

2.配置，（不同需求配置内容不同）

  //折柱线图
    
    changetype(xdata,ydata,yBardata){
    

var chartDom = document.getElementById('yue');
var myChart = this.$echarts.init(chartDom);
var option;

option = {
  title: {
    text: '月销量统计图',
    subtext: 'Fake Data',
    left: 'left'
  },
 
  tooltip:{
    trigger:'axis'
  },
  xAxis: {
    type: 'category',
    axisTick:{
      alignWithLabel:true

    },
    data: xdata
  },
  legend: {
    data:['销售额','销售量']


  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:'销售额',
      data: ydata,
      type: 'line',
      smooth: true,
    
  
    },

    { 
      name:'销售量',
      data: yBardata,
       type: 'bar',
       smooth: true,
      // showBackground: true,
       backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
       }     }
  ]
};

option && myChart.setOption(option);
// 根据页面大小自动响应图表大小
window.addEventListener("resize", function () {
    myChart.resize();
      });


    },



    getdataCount(){
      dataCount()
      .then(res=>{
        if(res.status==200){
          console.log(res.data.data);
          this.list=res.data.data.list



        }
        
      }
      )

    },
      async getformat(){

        try {
          const res = await format()

         console.log(res.data.result.data);
          let arr=res.data.result.data.sale_money
          // let arrb=res.data.result.data.sale_funnel
          

          console.log(arr);
let xdata=[],ydata=[],yBardata=[],arrb=[]
          arr.forEach(v=>{
            xdata.push(v.name)
            ydata.push(v.total_amount)
            yBardata.push(v.num)
            let obj={}
            obj.name=v.name;

            obj.value=v.total_amount;

            arrb.push(obj)



          })

      
          this.changetype(xdata,ydata,yBardata)
          this.bzt(arrb)
          
        } catch (error) {
          console.log(error);
          
        }

        



    },
    async getorderinfo(){
      const res=await orderinfo()

      console.log(res.data.list);
      this.num=res.data.list

    }

   
  },
  created(){
  this.getdataCount()
  
 
  },
  mounted(){
    // this.changetype()
 
    this.getformat()
    this.getorderinfo()
   
  }
  

 
};