vue项目中使用echarts--详细步骤

 

1.安装

npm install echarts --save

package.json中有此项，代表安装成功（注意自己的版本）

 

 

 

2.引入全部组件

在main.js中引入：

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

 

3.使用

<template>
  <div id="LBChart" :style="{ width: '100%', height: '82%' }"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  created() {},
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("LBChart"));
      // 绘制图表
      myChart.setOption({
        // backgroundColor: "#0f375f",
        grid: {
          top: "12%",
          lef: "15%",
          // right: "15%",
          bottom: "20%", //也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        // legend: {
        //   data: ["销售水量", "主营业务"],
        //   top: "15%",
        //   textStyle: {
        //     color: "#ffffff",
        //   },
        // },
        xAxis: {
          data: ["1月", "2月", "3月", "4月"],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              color: "#01FCE3",
            },
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff", //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "单位：篇",
            nameTextStyle: {
              color: "#fff",
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            name: "单位：次",
            nameTextStyle: {
              color: "#fff",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              // formatter: "{value} %", //右侧Y轴文字显示
              formatter: "{value} ", //右侧Y轴文字显示
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "销售水量",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#f59a23",
            },
            lineStyle: {
              color: "#f59a23",
            },
            areaStyle: {
              color: "rgba(5,140,255, 0.2)",
            },
            data: [4.2, 3.8, 4.8, 3.5],
          },
          {
            name: "主营业务",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00FFE3", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4693EC", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
          },
        ],
      });
      //多图表自适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

 

 

4.效果图

 

 

 

扩展：（福利）

如果官网上的Echarts满足不了你的需求和审美，我一般喜欢在Echarts社区里面找

Echarts官网：https://echarts.apache.org/zh/index.html

Echarts社区：https://www.makeapie.cn/echarts

 

如果有的Echarts不能使用 注意运行版本

 

 

 

 

 

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/16350844.html
本博客文章均为作者原创，转载请注明作者和原文链接。