效果图如下：
完成步骤：
1创建dom容器，并设置宽高，以及ref，数据从接口提前获取好
2创建echarts实例，并在mounted里调用
3绘制图表
4setOption一下
thischartInstancesetOption(initOption);
基础折线图
定义echarts组件并引入依赖
使用ref获取到dom引用并初始化图表
echarts配置项如下
效果如下
分页
先看下效果
由于有现成的demo，基本上改改就可以了，这里只简单记录下
参考地址：>
<div id="main" style="height:400px" ></div>
var myChart = ecinit(documentgetElementById('main15'));
这两处的id应该一致，均为“main”即可~
定义一个数组为names，在 legend中通过 data: names传入图例名称；
创建一个数组mydata[]，用for循环把后台传来的List整个放进去(注意格式为“{value:xxx, name:xxx}”），在option里的series中通过“data: mydata”传入即可；
是的，Vue 柱状图的 series 可以配置为单选模式。一般来说，您需要将 series 的 `selectedMode` 属性设置为 `'single'`。
以下是一个示例 Vue 柱状图的配置代码：
```vue
<template>
<div id="chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
const chartDom = documentgetElementById('chart')
const myChart = echartsinit(chartDom)
const option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [10, 20, 30, 40],
// 单选模式
selectedMode: 'single'
}
]
}
myChartsetOption(option)
}
}
</script>
```
在上面的示例中，我们将柱状图的 `selectedMode` 属性设置为 `'single'`，这样就可以实现单选模式了。在单选模式下，单击某个柱子将会选中该柱子并取消选中其他柱子。
请注意，如果您需要在单选模式下获取用户选择的柱子，可以使用 echarts 的事件监听器来实现。您可以使用 `myCharton('click', handler)` 监听 `click` 事件，并在事件处理程序中获取当前选中的柱子的信息。
```javascript
myCharton('click', function(params) {
consolelog(params) // 输出当前选中的柱子的信息
})
```
以上是一个简单的示例，您可以根据您的实际需求进行修改和扩展。
引入ECharts
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esljs，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
requireconfig({
packages: [
{
name: 'echarts',
location: '//src',
main: 'echarts'
},
{
name: 'zrender',
location: '///zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。
自218起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：
dist（文件夹） : 经过合并、压缩的单文件
linejs : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
barjs : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatterjs : 散点图
kjs : K线图
piejs : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radarjs : 雷达图
mapjs : 地图
forcejs : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chordjs : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funneljs : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gaugejs : 仪表盘
eventRiverjs : 事件河流图
treemapjs : 矩阵树图
vennjs : 韦恩图
echartsjs : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echartsjs的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/>//from echarts example
<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
</body>
在主文件引入后你将获得一个AMD环境，配置requireconifg如下：
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
<script type="text/javascript">
requireconfig({
paths: {
echarts: '/js/dist'
}
});
</script>
</body>
requireconfig配置后就可以通过动态加载使用echarts
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="/js/echartsjs"></script>
<script type="text/javascript">
requireconfig({
paths: {
echarts: '/js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ecinit(documentgetElementById('main'));
var option = {
}
myChartsetOption(option);
}
);
</script>
</body>
总结来说，模块化单文件引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echartsjs所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts')init(dom)就行）
详见入门教程 ( Getting started ) »
标签式单文件引入
自135开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echartsconfig = require('echarts/config')， zrendertoolcolor = require('zrender/tool/color')
//from echarts example<body>
<div id="main" style="height:400px;"></div>
<script src="example/;
<script>
var myChart = echartsinit(documentgetElementById('main'));
var option = {
}
myChartsetOption(option);
</script>
</body>
以上就是关于使用echarts制作折线图与柱状图混合图表全部的内容，包括:使用echarts制作折线图与柱状图混合图表、react--使用echarts做折线图、echarts中柱状图搭配时间轴来使用，测试一直不成功，求解答！等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）