eCharts图表

1. tooltip

tooltip中进行点击事件

注意事项：

• triggerOn 一定要改为 “click”。
• enterable 要设置为 true，才能使鼠标进入提示框可以进行点击事件
• 在 formatter 中添加 内联的点击事件，事件处理函数需要挂载在 window 上，否则获取不到
• extraCssText修改tootip提示框的样式

1. options的tooltip配置：

tooltip: {
              trigger: 'axis', // 'axis' 'item'
              axisPointer: {
                type: 'shadow' // 'cross': 十字线； 'shadow'： 柱形半透明方块
              },
              triggerOn: 'click',//点击才会出现提示框
              enterable: true,//鼠标可以进入提示框
			  extraCssText: 'z-index: 99;max-width: 100px;white-space:pre-wrap', // 设置悬浮框的样式，比如修改层级默认是9999999，可能会遮盖住点击事件中的弹窗
              backgroundColor: 'rgba(85, 89, 132, 87)',	//tooltip背景色
              borderColor: 'rgba(85, 89, 132, 87)',		//tooltip边框颜色
              borderWidth: 1,
              formatter: function (params) { // 自定义内容
                console.log(params)
                return `<div class="attention-chart-tooltip">
                <h5>群组1：数据统计</h5>
                <div onclick="showModal()">查看舆情走势详情</div>
              </div>`
              }
            }

2. 将点击事件的事件函数绑定到window上，否则无效

    mounted() {
      /* echart的tooltip中绑定点击事件，对应的点击函数需要绑定到window上 */
      window.showModal = () => {
        this.lineModalVisible = true
        // todo 处理逻辑
      }
    },

2. 渐变色

import { graphic } from 'echarts'
 new graphic.LinearGradient(
	 0, 0, 1, 0,
	 [
		 { offset: 0, color: 'rgba(56, 90, 255, 1)' },
		 { offset: 1, color: 'rgba(103, 127, 247, 1)' }
	 ]
 )
				
				
				
new graphic.RadialGradient(0.1, 0.6, 1, [
	{
		color: 'rgba(28, 143, 44, 0.1)',
		offset: 0
	},
	{
		color: 'rgba(28, 143, 44, 0.62)',
		offset: 1
	}
])

3. json数据路径

echarts 官网实例中数据来自本身的json文件，如下

$.get(ROOT_PATH + '/data/asset/data/disk.tree.json', function (data) {})

完整路径是：

https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples

再拼上实例中的路径

https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/disk.tree.json