echarts官方文档 echarts.apache.org/zh/index.ht…

echarts在vue中的使用

(zhuanlan.zhihu.com/p/266700830)

1.安装echarts

npm install echarts --save

2.引入echarts

全局引入：

main.js

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

按需引入：

Home.vue

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需图表

3.绘制图表

1.  准备一个具有宽高的容器（**container**）；
2.  每次绘制之前需要初始化echarts实例对象（**init**）；
3.  指定配置项和数据，必须设置配置，否则无从绘制（**option**）；
4.  将配置项设置给echarts实例对象，改变数据时必须传入改变的数据，否则监听不到新数据（**setOption**）；

 <!-- 1.准备具有宽高的容器，图表的大小默认等于该容器的大小 -->
 <div style="width: 100%; height: 100%" ref="chart"></div>

<script>
//按需引入图表
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
    data() { return { chart: null } }, //图表实例
    mounted() { this.init() },
 methods: {
        init() {
         //2.初始化实例对象
         this.chart = Echarts.init(this.$refs.chart);
         //3.配置数据
         let option = {
         xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //X轴
         yAxis: { type: 'value' }, //Y轴
         series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] //配置项
                    };
         // 4.传入数据
         this.chart.setOption(option);
        }
    }
};
</script>

echarts在js中使用

安装echarts:

CDN安装：在 www.jsdelivr.com/package/npm… 选择 dist/echarts.js，点击并保存为 echarts.js 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>

图表的大小：

在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。默认情况下图表的大小等于容器的大小。

若定义div节点时未指定宽高，或者希望图表的大小不等于容器的大小，则可以在echarts初始化的时候为图表指定大小。

echartsInit() {
      // 初始化
      this.chart = echarts.init(this.$refs.chart, null, { width: 100, height: 100 })
}

echarts 高亮显示

echarts 如何实现点击高亮

Echarts 常用API之action行为

echarts API action 之 dispatchAction

echarts 取消图例上的点击事件和图表上鼠标滑过点击事件

echarts移除事件off_

Echarts 底部加table - StarFox - 博客园 (cnblogs.com)

echarts-使用