Echarts样式设置

ECharts 可以通过样式设置来改变图形元素或者文字的颜色、明暗、大小等。

颜色主题

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。

//light
var chart = echarts.init(dom, 'light');
 //dark
var chart = echarts.init(dom, 'dark');

调色盘

• 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

  • 全局

   //在option中设置
   color:['各种颜色']
  

  • 专属

  // 在series中设置自己的调色盘
     series: [{
       type: 'pie',
       // 此系列自己的调色盘。
       color: ['各种颜色']
    }]
  

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。

如果要自定义高亮样式可以通过 emphasis 属性来定制：

emphasis: {
    itemStyle: {
        // 高亮时点的颜色
        color: 'red'
    },
    label: {
        show: true,
        // 高亮时标签的文字
        formatter: '高亮时显示的标签内容'
    }
},

补充： Echarts的图表类型设置

通过 type 属性的属性值来设置

line	折线
bar     柱形图
scatter	散点图，气泡图
k	K线图，蜡烛图
pie	饼图，圆环图
radar	雷达图，填充雷达图
chord	和弦图
force	力导布局图
map	地图
heatmap	热力图
gauge	仪表盘
funnel	漏斗图
tree	树图
wordCloud	词云
treemap	矩形树图

组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 获取点击图例的选中状态
    var isSelected = params.selected[params.name];
    // 在控制台中打印
    console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
    // 打印所有图例的状态
    console.log(params.selected);
});

Echarts图例联动

echarts.connect([myChart1,myChart2])

效果示例

echarts.js响应式实现

在option中添加media，代码如下：

media:[
            {
               //小与1000像素时候响应
               query:{
                    maxWidth:1000
                },
                option:{
                   title:{
                        show:true,
                        text:'测试一下'
                   }
                }
           }
     ]
//每次窗口大小改变的时候都会触发onresize事件，这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
    window.onresize = echart.resize;